javascript - 使用 CSS 自动拉伸(stretch)列宽

Question

我想类似的问题肯定已经被问过了，但我不知道如何找到它...

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

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

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

Answer 1

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