使用CSS自动拉伸列宽

Question

我认为类似的问题可能已经被问过了，但我不知道如何找到它...

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

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

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

我确定这可以通过JavaScript实现（检查第二列是否存在），但使用纯CSS呢？这是否真的可能？我需要支持IE 9+。

- Andrey

---

你有考虑使用 flexbox 吗？然后可以为 IE9 使用回退方案。 - evolutionxbox

@evolutionxbox，是的，但我需要完整的IE9+支持，所以flexbox不起作用。 - artemean

Answer 1

你需要像下面这样的东西。使用display:table作为父元素，display:table-cell作为子元素。

.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>

希望这能有所帮助。

- ketan

Answer 2

我知道你要求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>

- Mehdi Brillaud

Answer 3

这可以通过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

- Vandervals

---

我个人会选择这种解决方案。这样可以避免使用显示表格（可能会导致响应性问题）。 - evolutionxbox

我同意你的观点。但是，在这种情况下，我们必须非常小心地处理放置在 .wrapper 中的内容，因为即使它们不是 .sidebar，当有更多子元素时，选择器也会失效。 - Vandervals