3列流体布局css

Question

好的，我正在尝试制作 3 列布局，但我希望所有列都具有 33% 的宽度和 50% 的高度。我还想在列的 3 个 div 上填充。但是每次我添加填充时，它都会使最后一个 div 转到下一行。

我该如何解决这个问题？？

html

<div id="nav">
    <div class="block" id="left">
        <h1>blah blah</h1>
    </div>
    <div class="block" id="middle">
        <h1>blah blah</h1>
    </div>
    <div class="block" id="right">
        <h1>blah blah</h1>
    </div>
</div>

css

#nav {
    ??
}
.block {
    padding:20px;
    width:33%;
    height:50%;
    position:relative;
    float:left;
}

Answer 1

不幸的是，它不会按照你想要的方式使用 DOM 结构。 W3 盒子模型在计算的宽度中包含填充和边框，因此它为每个 div 增加了 40px，这使其 120px 太宽了。

您想要做的是将这三个 div 视为包装器，然后将 div 嵌套在其中，然后您可以分配一个边距来替换填充。

例子：

<div id="nav">
    <div class="block" id="left">
        <div>
            <h1>blah blah</h1>
        </div>
    </div>
    <div class="block" id="middle">
        <div>
            <h1>blah blah</h1>
        </div>
    </div>
    <div class="block" id="right">
        <div>
            <h1>blah blah</h1>
        </div>
    </div>
</div>

CSS：

.block {
    width:33%;
    height:50%;
    position:relative;
    float:left;
    background-color:#CCC;
}

.block>div {
    margin:20px;
}

工作演示：http://jsfiddle.net/AlienWebguy/Yf34X/