CSS布局-宽度自适应

2017年02月01日Web前端0

在布局中，我们经常会用到div的宽度自适应。

一、两列

两列都是自适应

我们可以使用宽度百分比来实现。

*{padding:0;margin:0;}
.left,
.right{width:50%;height:100px;float:left;}
.left{background-color:red;}
.right{background-color:olive;}
<body>
  <div class="left"></div>
  <div class="right"></div>
</body>

2017-02-01_201059

这样，很容易就实现了双列各占一半的布局，若要对两列所占宽度进行调整的话，那么只需要修改各列的宽度百分比就行了。

一列自适应

假设第一列宽度是固定的100px，而第二列需要自适应宽度。

方法一：利用浮动和外边距

*{padding:0;margin:0;}
.left{width:100px;height:100px;float:left;}
.right{margin-left:100px;height:100px;}
.left{background-color:red;}
.right{background-color:olive;}
<body>
  <div class="left"></div>
  <div class="right"></div>
</body>

2017-02-01_201915

这样，左侧100px，右侧自适应的布局就出现了，当然这种方式在IE6下存在一个bug，会使得左右两个div之间有个3px的空隙。

方法二：利用绝对定位

*{padding:0;margin:0;}
.box{position:relative;}
.left{width:100px;height:100px;float:left;}
.right{position: absolute;height:100px;left:100px;right:0px;}
.left{background-color:red;}
.right{background-color:olive;}
<body>
  <div class="box">
    <div class="left"></div>
    <div class="right"></div>
  </div>
</body>

效果图同上，利用绝对定位，对自适应的元素稍作定位，便能实现自适应，IE7+都可以兼容。

三列及以上

方法一：利用宽度百分比

该方法可以很容易地实现多列自适应布局，当然如果出现设置宽度这个问题时，该方法也是可以使用的，需要配合使用box-sizing这个属性，可以让原方法继续发挥他的作用。

方法二：利用浮动和外边距

该方法只能实现单列自适应（margin），其他列固定宽度（浮动）这种布局方式。

注：多列时，当出现特殊的自适应布局时，可以考虑在该方法外嵌套一个方法一的方式。当然，其他情况下使用时，会照成自适应区块的增长（减小）比例不是固定的问题。

方法三：绝对定位

同方法二，多列时使用仍有限制。

CSS

目录