1

好的,我正在尝试制作 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;
}
4

1 回答 1

2

不幸的是,它不会按照你想要的方式使用 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/

于 2011-07-11T05:36:28.337 回答