Question

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

例如：

www.site.com

将显示所有4列。去：

www.site.com?col=3

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

SO：

IF 4列，所有列均为220px，每边10px边距。
IF 3列，所有列均为300px，每边10px边距
IF 2列，所有列均为460px，每边10px边距
IF 1列，它是940px，每边10px边距

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

更新

似乎一致的答案是使用基于液体的格式（我假设但是因为当前项目的构建是希望可能存在我可能不知道的黑客攻击）。

Answer 1

flexible box model是要去的地方。请参阅此codepen以查看其实际效果。如果您不想支持IE＆lt; 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>

有没有办法创建“自动”宽度列结构？

更新

1 个答案: