CSS实现多列等宽的方法详解

2016-03-02    编辑:kp878     点击(
多列等宽布局是非常的常用了,我们通常在开发的网页中用到了,下面来为各位介绍一个CSS实现多列等宽的方法,希望文章可以对各位有帮助.

实现方法有css与js三种方法了,下面我们一起来看看.

网页中多列等宽是很常见的布局,一般使用百分比的 width 属性即可轻松实现。


bgbk.org-20150125_1

 

但是我真正想要说得是,在不明确到底有多少元素的情况下实现多列等宽,比如网站的幻灯片导航:


bgbk.org-20150125_2

 

幻灯片导航的数量会随着幻灯片的数量变化,元素数量不是固定的。需要完全等宽,并且占满整个父级元素。


我想出了三种解决方案,下边分别介绍。

display: table-cell

第一种方法利用 display 属性的 table-cell 值,把元素变成表格,就可以等宽了。

<style type="text/css">
 .box {
  width: 600px;
 }
 
 .box div {
  color: #FFF;
  display: table-cell;
  height: 150px;
 }
</style>
<div class="box">
 <div style="background: #666;">
  <span>第1列  第1列  第1列  第1列</span>
 </div>
 <div style="background: #444;">
  <span>第2列  第2列  第2列  第2列</span>
 </div>
 <div style="background: #222;">
  <span>第3列  第3列  第3列  第3列</span>
 </div>
 <div style="background: #000;">
  <span>第4列  第4列  第4列  第4列</span>
 </div>
</div>
这种方法是比较好的,兼容到 IE8。

权衡兼容性和复杂程度之后我选择了这种方案。

box-flex

box-flex 属性是 CSS3 的新东西,他可以把父元素的宽度分配给子元素,就像分数一样。

假设一个容器的宽度是 1200px,里边有三个子元素。

如果三个子元素的 box-flex 属性都设置成 1,那么它们将平分 1200px,也就是每个元素会获得 400px 的宽度。

如果一个元素的 box-flex 属性设置成 2,其余的两个设置成 1,那么设置成 2 的元素将会有 600px 的宽度,设置成 1 的两个元素会有 300px 的宽度。

看到这里,就会发现 box-flex 属性实在是太好了有木有,用它实现多列等高轻而易举,而且非常好理解。

<style type="text/css">
 .box {
  width: 600px;
  display: -webkit-box;/* 注意这里 */
 }
 
 .box:after {
  content: '';
  height: 0;
  display: block;
  clear: both;
 }
 
 .box div {
  color: #FFF;
  box-flex: 1;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  height: 150px;
  float: none;
 }
</style>
<div class="box">
 <div style="background: #666;">
  <span>第1列</span>
 </div>
 <div style="background: #444;">
  <span>第2列</span>
 </div>
 <div style="background: #222;">
  <span>第3列</span>
 </div>
 <div style="background: #000;">
  <span>第4列</span>
 </div>
</div>
可惜这种方法兼容性不佳,只有 IE10+ 和 Chrome 等浏览器支持,但这么强大的属性还是了解一下比较好。

JavaScript

最后一种方法就不是纯 CSS 了,需要使用 JS 实现,这种方法兼容性最好,支持几乎目前所有浏览器,但是比较麻烦。

<style type="text/css">
 .box {
  width: 600px;
 }
 
 .box:after {
  content: '';
  height: 0;
  display: block;
  clear: both;
 }
 
 .box div {
  color: #FFF;
  height: 150px;
  float: left;
 }
</style>
<script>
 window.onload = function(){
  var box = document.getElementById( 'box' ),
   Elements = box.getElementsByTagName( 'div' ),
   width = box.currentStyle ? box.currentStyle['width'] : document.defaultView.getComputedStyle( box, false )['width'];
  width = parseInt( width );
  for( var i = Elements.length - 1; i >= 0; i-- ){
   Elements[i].style.width = width / Elements.length + 'px';
  };
 }
</script>
<div class="box" id="box">
 <div style="background: #666;">
  <span>第1列</span>
 </div>
 <div style="background: #444;">
  <span>第2列</span>
 </div>
 <div style="background: #222;">
  <span>第3列</span>
 </div>
 <div style="background: #000;">
  <span>第4列</span>
 </div>
</div>