css - 有什么方法可以创建 "auto"宽度的列结构？

Question

我有一个站点，其顶层有 4 个中心列，在 960 网格像素的舞台上所有列的宽度都相等。如果将某个查询字符串添加到 URL 中，列数(当然包括里面的内容)可以缩小到 1(绝不会小于 1，绝不会大于 4)。

例如:

www.site.com

将显示所有 4 列。前往:

www.site.com?col=3

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

所以:

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

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

更新

似乎一致的答案是使用基于液体的格式(我假设是这样，但由于当前元素的构建是希望有可能被黑客入侵，我可能没有意识到这一点)。

Answer 1

flexible box model是去这里的路。看这个codepen看到它在行动。 如果你不想支持 IE < 10 你 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>