0

960幅のキャンバスで3列のレイアウトをデザインする方法に問題があります。

これは私が試みていることの図です：

ここに画像の説明を入力してください

960幅のDIV要素があります。外側に20pxのパディングがあり、内側に3つの等しい列が必要です。

誰かが3つの列を手伝ってくれるので、各ボックスとその間のマージンは等しくなりますか？2列と4列は単純ですが、3で割っても、含まれている要素の20pxのパディングと同じようにはなりません。2列と4列を使用する場合は、FLOAT：LEFTとCLEARを含む追加の要素を使用します。

<style>
.960_element { width:960px; padding:20px; }
.960_element .left {  }
.960_element .middle {  }
.960_element .right {  }
</style>

<div class="960_element">
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div>
</div>
4

2 に答える 2

0

まず、.960_elementクラス名が間違っています。数字で始まるクラス名を定義することはできません

デモ

HTML

<div class="element">     
    <div class="left">h</div>     
    <div class="middle">h</div>     
    <div class="right">h</div>
</div>

CSS

.element { width:960px; padding:20px;background-color: #dddddd;margin: 40px;/*margin not required*/}
.element div {background-color: #ff0000;}
.left { height: 200px; width: 32%; display: inline-block;}
.middle { height: 200px; width: 32%; margin-left: 14px;  display: inline-block; }
.right { height: 200px; width: 32%; margin-left: 14px;  display: inline-block; }
于 2012-11-04T06:49:21.157 に答える
0

各アイテムの周囲に10ピクセルの余白を配置するのが一般的です。これにより、アイテム間のスペースは合計で20ピクセルになり、側面のスペースはわずか10ピクセルになります。

状況に応じて、ボックスの幅は293（および3分の1）ピクセルである必要があります。これは、960-80 / 3（幅、マージンを差し引いたもの、ボックスで割った値）から計算されます。

幅が980の場合、または左右に10ピクセルの余白がある場合は、ボックスの偶数（300）が適切になる可能性があります。

于 2012-11-04T06:51:58.560 に答える