有什么方法可以创建“自动”宽度的列结构？

Question

我有一个网站，它的顶层有 4 个中心列，在 960 网格像素舞台上的所有列都等宽。如果在 URL 中添加某个查询字符串，则列数（当然包括里面的内容）可以缩减到 1（永远不会小于 1 永远不会大于 4）。

例如：

www.site.com

将显示所有 4 列。前往：

www.site.com?col=3

将网站但完全没有第四列。这个想法还在继续。我正在努力解决的是，在存在查询字符串（由 PHP 管理）的情况下，是否可以允许其他列“自动”更正它们的宽度以保持页面的整个宽度。

所以：

• 如果 4 列，所有列都是 220 像素，每边有 10 像素的边距。
• 如果 3 列，所有列都是 300 像素，每边有 10 像素的边距
• 如果 2 列，所有列都是 460 像素，每边有 10 像素的边距
• IF 1列，940px，边距10px

我想实现这一点，但如果可能的话，我希望在一个通用的 CSS 类中动态地实现。

更新

似乎一致的答案是使用基于液体的格式（我假设但由于当前项目的构建希望可能存在我可能没有意识到的黑客攻击）。

Answer 1

flexible box model 是前往此处的方式。请参阅此codepen 以查看它的实际效果。 如果你不想支持 IE can just use it (prefixed)。

CSS：

.wrapper {
  display: box; //this property needs prefixes
  width: 960px;
  height: 100px;
  margin: 10px;
  background: red;
}

.box {
  box-flex: 1; //this property needs prefixes
  height: 100px;
  background: green;
  margin: 0 10px;
}

HTML：

<div class="wrapper">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>  
  <div class="box"></div>  
</div>

<div class="wrapper">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>  
</div>

<div class="wrapper">
  <div class="box"></div>
  <div class="box"></div>
</div>

<div class="wrapper">
  <div class="box"></div>
</div>