左右布局以及中文冒号造成的错误显示

最新推荐文章于 2021-06-19 04:26:42 发布

larissa1984

最新推荐文章于 2021-06-19 04:26:42 发布

阅读量348

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/larissa1984/article/details/82313993

版权

html 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> a </title>
<style>
    .wrap{
	     width:900px;
         margin:0 auto;
		 font-size:20px;
		 text-align:center;
		 }
     #left{ width:200px;
			height:500px;
            background:#66ccff;
			float:left;		
			}
     #right{ 
			height:500px;
            background:#ccf; 
			margin-left:200px;
			}
			
			
</style>
<!--混合浮动+普通流-->
</head>


<body>
<div class="wrap">
     <aside id="left">#left</aside>
	 <section id="right">#right</section>
</div>
</body>
</html>

写的过程中由于有一个zhon中文的冒号导致yi一直无法正确浮动。要避免中文输入法状态下的操作。还有编程软件怎么才会报错。

notepad++怎么才会在编译过程中报错

aside元素主要有以下两种使用方法

1）被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的相关资料、名次解释，等等。

<article>
  <h1>…</h1>
  <p>…</p>
  <aside>…</aside>
</article>

2）在article元素之外使用作为页面或站点全局的附属信息部分。最典型的是侧边栏，其中的内容可以使友情链接，博客中的其它文章列表、广告单元等。

<aside>
  <h2>…</h2>
  <ul>
    <li>…</li>
    <li>…</li>
  </ul>
  <h2>…</h2>
  <ul>
    <li>…</li>
    <li>…</li>
  </ul>
</aside>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> left and right</title>
<style>
	.wrap{
			width:900px;
			height:500px;
			font-size:20px;
			text-align:center;
			overflow:hidden;
			}
	#left{
			width:200px;
			height:500px;
			background:yellow;
			float:left;}
	#right{
			width:700px;
			height:500px;
			background:red;
			float:left;}
			<!--纯浮动式实现方案，浮动的不会撑开父级元素，所以需要overflow hidden-->
</style>

</head>
<body>
<div  class="wrap">
<aside id="left"> #left</aside>
<section id="right">#right</section>
</div>
</body>
</html>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> left and right</title>
<style>
	.wrap{
			width:900px;
			height:500px;
			font-size:20px;
			text-align:center;
			position:relative;
			}
	#left{
			width:200px;
			height:500px;
			background:yellow;
			position:absolute;
			top:0;
			left:0;
			}
	#right{
			width:700px;
			height:500px;
			background:red;
			top:0;
			right:0;
		}
			<!--相对定位，根据需要选择，但是这里不用top left 一样 -->
</style>

</head>
<body>
<div  class="wrap">
<aside id="left"> #left</aside>
<section id="right">#right</section>
</div>
</body>
</html>






<!--第三种实现方案-->

larissa1984

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
左右布局以及中文冒号造成的错误显示

&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;title&gt; a &lt;/title&gt;&lt;style&gt; .wrap{ width:900px; margin:0 auto; font-size:
复制链接

扫一扫