CSS布局之两列布局一列固定一列自适应

来源：互联网发布：单片机串口接收字符串编辑：程序博客网时间：2024/05/22 10:47

一、通过浮动和margin-left

 <div class="left">左列 </div> <div class="right">右列 </div> <div class="footer">footer </div>

 <style type="text/css">        *{<span style="font-family:Microsoft YaHei;">  </span>margin:0;  padding:0;  }        body{  width: 800px;  margin:auto;  }        .left{  background-color: red;  width:200px;  height:20px; <span style="color:#CC0000;"><strong> float: left;</strong> </span> }        .right{  background-color: blueviolet;  height:30px;  <strong><span style="color:#CC0000;">margin-left: 220px;</span></strong>  }        .footer{  background-color: coral;  clear: both;  } </style>

.left 设float：left
.right 设margin-left=.left宽度+间距
.footer 清除浮动
左右高度无限制

二、通过position和margin-left

<span style="font-size:12px;"><div class="left">左列</div><div class="right">右列</div><div class="footer">footer</div></span>

<span style="font-size:12px;">*{  margin:0;  padding:0;}body{  margin:auto;  width: 800px;}.left{  background-color: red;  width:200px;  height:300px; <strong> <span style="color:#990000;">position:absolute;</span></strong>}.right{  background-color: blueviolet;  height:500px;  <span style="color:#990000;"><strong>margin-left: 220px;</strong></span> }.footer{  background-color: coral; }</span>

注意：左列高度<右列高度

.left 设绝对定位
.right设margin-left=.left宽度+间距

三、通过position和偏移属性

<div class="wrap">    <div class="left">左列    </div>    <div class="right">右列    </div> </div> <div class="footer">footer </div>

 *{  margin:0;  padding:0;}body{  width: 800px;margin:auto; }.wrap{  background-color: gray; <strong><span style="color:#990000;">position: relative;</span></strong> }.left{  background-color: red; width:200px; height:500px;}.right{  position:absolute;background-color: blueviolet; height:500px; <strong><span style="color:#990000;">left: 220px; top:0; right: 0;</span></strong>}.footer{  background-color: coral;}

注意：左列高度>右列高度

父包裹层.wrap 设置相对定位
.right 根据父包裹层进行偏移 right:0使得与父包裹层无间隙

四、position和float

<span style="font-size:12px;"><style type="text/css">        *{  margin:0; padding:0;}        body{  margin:auto; width: 800px;}        .wrap{ <strong><span style="color:#CC0000;"> position:relative; </span></strong>}        .left{  background-color: red; height:500px;<strong><span style="color:#CC0000;"> float: left;</span></strong>}        .right{  background-color: blueviolet; height:300px;<span style="color:#CC0000;"> position: absolute; left:220px; right:0;</span> }        .footer{  background-color: coral;<strong><span style="color:#CC0000;"> clear: both; </span></strong>}</style></span>

<div class="wrap">    <div class="left">左列    </div>    <div class="right">右列    </div></div><div class="footer">footer</div>

这个方法挺复杂的，其实通过三就可以实现

五、BFC

CSS之BFC详解

深入理解BFC和Margin Collapse

0 0