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に40ピクセルが追加され、120ピクセル幅が広すぎます。

これらの3つの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 に答える