1

次の JSBin を見てください: http://jsbin.com/iheNOvo/3/edit

ここにもコードがあります：

<html>
<head>
    <style type="text/css">
        #container {
            display: inline-block;
            width: 50%;
            height: 20%;
        }

        #elem1 {
            background-color: green;
            width: 50%;
            height: 100%;
            float: left;
            padding-right: 2%;
        }

        #elem2 {
            background-color: yellow;
            width: 50%;
            height: 100%;
            float: left;
        }
    </style>
</head>

<div id="container">
    <div id="elem1"></div>
    <div id="elem2"></div>
</div>

問題は、最初の div にパディングを追加したため、黄色の div が次の行に続くことです。コンテナがその中にあるものを包み込むことができることを望んでいますが、これは機能していないようです. 必要なものをどのように達成できるかについて何か考えはありますか?

4

4 に答える 4

1

を追加できる小さなハックがあるbox-sizing:border-boxため、パディングは要素の幅に影響しません。

jsbin デモ

#elem1 {
    box-sizing:border-box
}

これを追加すると、必要に応じて両方divsが同じ行にレンダリングされます。

これを回避したい場合は、親要素または子要素自体の幅を変更してください。

#elem1 {
    width: 48%;
    padding-right: 2%;
}

jsbin デモ

于 2013-09-28T18:00:18.917 に答える
0

私の完全な答えを更新すると、トピックのスターターは両方の間にマージンがあります:

http://jsfiddle.net/8XKAR/2/

#elem1 {
    background-color: green;
    width: 48%; /* 2% less */
    height: 100%;
    float: left;
    margin-right: 2%; /* you want margin instead of padding */
}

#elem1別の解決策は、 49%で作ること#elem2で、両方とも 1% を与えるため、マージンが中央に配置されます。

最後のオプションはボクシング モデルです。これは、簡単な代替手段がある場合は好まないオプションです。これは私の個人的な意見ですが、私の経験では、一度だけ必要でした。

#elem1 {
    box-sizing:border-box;
    margin-right: 2%; /*padding instead of margin */

}
于 2013-09-28T17:56:17.987 に答える
0

パディングを追加する場合は、div を 100% に縮小する必要があります。

#elem1 {
    background-color: green;
    width: 48%;
    height: 100%;
    float: left;
    padding-right: 2%;
}
于 2013-09-28T17:56:35.057 に答える
0

リンク: http://jsbin.com/iheNOvo/7/edit

#elem1 {
        width: 48%;
        padding-right: 2%;
}
于 2013-09-28T18:02:15.517 に答える