DIV+CSS 3栏合理布局案例编码

2021-03-11 18:43 jianzhan
1.规定:如上图中的,3栏目合理布局,正中间的MAIN是自融入访问器的宽度,左LEFT固定不动宽200PX,右RIGHT固定不动宽200PX;

拷贝编码
编码以下:

.right,.left{height:300px;width:200px;}
.right{ float:right;background:#000000;}
.left{ float:left;background:#009933;}
.main{background:#F60; height:300px;}
<div class="right">RIGHT</div>
<div class="left">LEFT</div>
<div class="main">MAIN</div>

2.如今规定先载入MIAN,其它规定同上面1样;
总结:关键是运用波动元素的负外边距;
  而且要了解float和肯定精准定位,这两种元素的宽度全是依据內容的宽度来的。
  相对性精准定位和块级元素,假如不设置宽,全是100%(相对父级的宽)

拷贝编码
编码以下:

.boxmain{float:left;margin-right:⑵00px;width:100%;}
.right,.left{height:300px;width:200px; z-index:1;}
.right{ position:absolute; right:0; background:#000000;}
.left{position:absolute;left:0; background:#009933;}
.main{margin-right:200px;background:#F60; height:300px;margin-left:200px;}
<div class="boxmain">
<div class="main">main</div>
</div>
<div class="left">LEFT</div>
<div class="right">RIGHT</div>

详细编码:

提醒:您能够先改动一部分编码再运作