5

幅 100% のコンテナー div があり.block、その中に 2 つの div があり、両方とも幅 50% で、インライン ブロックを表示し、左にフローティングします。これらの div の間に一貫した 20px のガターを持つことはまったく可能ですか?
それぞれの幅を 49% に設定し、左側のマージンを 2% に設定する単純な方法を試しましたが、可能であれば、これらの 2 つの div の間に一貫した 20px のガターが必要です。
jsFiddle デモ: http://jsfiddle.net/D6U3t/

HTML:

<div class="container">
    <div class="block"></div>
    <div class="block"></div>
</div>

CSS:

.container {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 300px;
    background-color: silver;
}

.block {
    position: relative;
    width: 50%; height: 200px;
    background-color: red;
    display: inline-block;
    float: left;
}

どんな提案でも大歓迎です！

4

5 に答える 5

3

ラッパー div が受け入れられる場合は、お手伝いできます。その秘密は (よくあることですが) にあり* {box-sizing: border-box;}ます。

フィドル。

于 2013-09-08T14:53:22.237 に答える
0

親コンテナーのパディングを使用してから、子コンテナーを幅 100%、高さ 100% にします。

私のJSFiddleをチェックしてください：http://jsfiddle.net/D6U3t/10/

HTML

<div class="container">
    <div class="block first">
        <div class="inner-block"></div>
    </div>
    <div class="block second">
        <div class="inner-block"></div>
    </div>
</div>

CSS

* {
    box-sizing: border-box;
}

.container {
    margin: 0;
    width: 100%; 
    height: 100%;
    background-color: silver;
}

.block {
    position: relative;
    width: 50%; 
    height: 200px;
    float: left;
}

.block.first {
    padding: 0 10px 0 0;
}

.block.second {
    padding: 0 0 0 10px;
}

.inner-block {
    height: 100%;
    width: 100%;
    background-color: red;
}
于 2013-09-08T17:23:35.763 に答える
0

もう 1 つのクラスを追加する必要があります。私はその仕事だと思います。

    .block:last-child {
     margin-left:20px;
     float:right;
     }

& .block の幅を 49% に減らします。

フィディルをチェックしてください：http://jsfiddle.net/D6U3t/14/

ありがとう

于 2013-09-08T14:33:13.750 に答える