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/