0

次の寸法の 3 列のレイアウトがあります。

左の列:240px;中央の列:360px;右の列:360px.960px ラッパーを使用しています。

float を使用してレイアウトを作成し、プレースホルダー テキストを配置しました。各列の幅を 11px 減らして、すべての列に 10px の右マージンと 1px の実線の境界線を追加しました。 div ではなく h 要素 (Adobe DreamWeaver の組み込みの 3 列レイアウトから選んだヒントですが、それが良い方法かどうかはわかりません)。

固定幅レイアウトの場合、これはすべて問題なく機能しますが、液体/流動レイアウトの場合はどうでしょうか? レイアウトを台無しにせずにマージン、ボーダー、パディングを追加するにはどうすればよいですか (フロートを使用して列を配置しています)?

4

3 に答える 3

0

デザイン@960widthが必要な場合は、右幅に変更します:240px; cssの下で試してください：

#wrapper{
    width:960px;
}
.left{
    width:240px;
    padding:5px;
    float:left;
    border:1px solid black;
    margin:0 0 0 10px;
}
.middle{
    width:360px;
    padding:5px;
    float:left;
    border:1px solid black;
    margin:0 0 0 10px;
}
.right{
    width:240px;
    padding:5px;
    float:left;
    border:1px solid black;
    margin:0 0 0 10px;

}

以下のhtmlを試してください：

<div id="wrapper">
    <div class="left">left</div>
    <div class="middle">middle</div>
     <div class="right">right</div>
</div>
于 2013-06-24T06:47:19.280 に答える