使用CSS自动拉伸列宽

Question

我认为必须已经提出过类似的问题，但我不知道如何找到它...

我想创建一个带有自动伸展列的多列HTML布局。 我们说2列。 当页面上只有一列时，它会填充100％的容器宽度，当我添加25％的第二列时，第一列自动挤压到75％。

<div class="wrapper">
    <div class="content">...</div>
    <div class="sidebar">...</div>
</div>

我确信这可以用JavaScript完成（检查第二列是否存在），但是纯CSS呢？ 它真的可能吗？ 我需要支持IE 9+。

Answer 1

你需要像以下一样的东西。 使用display:table到parent并display:table-cell to child元素。

 .wrapper{ display:table; width: 100%; } .content{ display:table-cell; background-color:yellow; } .sidebar{ display:table-cell; width:25%; background-color:blue; } 

 <div class="wrapper"> <div class="content">...</div> <div class="sidebar">...</div> </div> 

希望能帮助到你。

Answer 2

这可以通过css选择器完成：

  .content{
    width:100%;
  }
  .sidebar{
    width:25%;
  }
  .content:not(:only-child){
    width:75%;
  }

笔： http ： //codepen.io/vandervals/pen/zGqorj

我认为这比桌面解决方案更优雅，支持范围很广： http ： //caniuse.com/#search=only-child

Answer 3

我知道你要求一个CSS解决方案，但是这里有一个简单的jQuery脚本，可以进行动态调整（无论列数是多少，它都会被划分并适合行）。

 $(document).ready(function() { $('.row').each(function(k, v) { var col = $('.column', this), colNumber = col.length, percent = 100 / colNumber; console.log(percent); col.css({'width' : percent + '%'}); }); }); 

 * { box-sizing: border-box; } .wrapper { width: 960px; margin: 0 auto; } .column { float: left; height: 200px; margin: 0 auto; border: 1px solid black; background-color: orange; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrapper"> <div class="row"> <div class="column"></div> <div class="column"></div> </div> <div class="row"> <div class="column"></div> </div> <div class="row"> <div class="column"></div> <div class="column"></div> <div class="column"></div> </div> </div>