0

<div>for eachを使用して 3 つの列の出力を取得しようとしています。

現在、左側の div は中央の div も適切に並んでいますが、右に配置しようとすると、切り取られてしまいます。

CSS

/* left div */
 #left-sidebar, #right-sidebar {
    width:15%;
    height:700px;
    float: left;
    padding-left: 15px;
    padding-top: 20px;
}

/* middle div */
 #mid-content {
    width:75%;
    padding-left: 30px;
    padding-top: 20px;
}

/* right div */
 #right-sidebar {
    float:right;
}
4

3 に答える 3

1

まず、あなたの要素は合計で 105% になります。次に、% で指定された幅を持つフローティング要素にパディングを追加しましたが、これは良い考えではありません。http://www.w3schools.com/css/css_boxmodel.aspを見てください。

ここに解決策がありますhttp://jsfiddle.net/Ru6CL/

#left-sidebar,
#right-sidebar,
#mid-content {
    float:left;
}

#left-sidebar,
#right-sidebar {
    width: 15%;
    background-color: red;
}
#mid-content {
    width: 70%;
    background-color: blue;
}

使用することを忘れないでください clear: both;

于 2013-11-09T20:52:54.107 に答える
0

これは、CSSのボックス モデルによると、要素のサイズがその幅、境界線、およびパディングの合計であるためです。したがって、コンテンツ + パディングが 100% を超えています。

これを解決するには、追加するだけです

box-sizing: border-box;

列に追加すると、上記を考慮して必要な幅が再計算されます。

さらに、要素を同じ方向、つまり左にフロートさせることを検討することもできます。

ここで実際の例を作成しました：http://jsfiddle.net/v6peK/

于 2013-11-09T20:50:49.053 に答える
0

合計が 100% になるように値を変更するとどうなりますか? 現在、75%、15%、15% を足すと 105% になります。

于 2013-11-09T20:44:29.410 に答える