0

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

例如：

www.site.com

将显示所有 4 列。即将：

www.site.com?col=3

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

所以：

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

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

更新

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

4

1 回答 1

1

灵活的盒子模型是这里的方法。请参阅此代码笔以查看它的实际效果。如果您不想支持 IE < 10，您可以使用它（前缀）。

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>
于 2012-12-04T21:16:22.567 回答