Question

我有这样的嵌套div（伪代码..）

<div0>
    <div1></div1>
    <div2>fluid width</div2>
    <div3></div3>   
</div0>

假设 div0，div1和div3 具有固定的宽度，可以给中心 div2 一个样式，所以总是有流体宽度（当然基于div0）主包装？）

Answer 1

如果div0没有，div 2怎么可能有一个流体宽度。您可以将div 2设置为固定位置，但这会导致无法使用。无论如何，我认为这是一个错误，你希望div 0和2是流动的。

是的，这是可能的

只需将div1和3的with设置为容器上的左右填充。并使用负边距（或左/右值）将它们设置在正确的位置。

将div 1 2和3浮动。

修改的

这是一个例子：http://jsfiddle.net/meo/H2LPJ/1/ 好吧，它比我的言论更复杂一点。

哦，我假设你的内容是在div2中，所以在内容中首先将这个div更加语义化：http://www.alistapart.com/articles/holygrail/

Answer 2

良好的多列布局示例：Float-less CSS layout

Answer 3

我遇到了这个问题，虽然商定的解决方案是Ok，但它依赖于漂浮和奇怪的边距，当你想要多行时，它们不是那么好。

我建议虽然flex css指令对于生产来说仍然过于流行，但你可以使用display：table;给你你（和我）需要的东西。

这是jsfiddle

＆＃13;

.results {
  display: table;
  width: 100%;
  table-layout: fixed;
}
.datarow {
  display: table-row;
}
.datarow div {
  display: table-cell;
}
.left {
  background: blue;
  width: 150px;
  color: white;
}
.center {
  width: 100%
}
.right {
  background: red;
  width: 120px;
  color: white;
}

＆＃13;

<div class="results">
  <div class="datarow">
    <div class="left">This box has a fixed width of 150px</div>
    <div class="center">This box is flexible</div>
    <div class="right">This box has a fixed width of 120px</div>
  </div>
</div>

＆＃13;

希望能帮到某人

中心列的CSS流体宽度

3 个答案: