CSS布局-宽度自适应

2017年02月01日Web前端

在布局中,我们经常会用到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),其他列固定宽度(浮动)这种布局方式。

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

方法三:绝对定位

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