0

私はこれに似た設定を目指しています：

ここに画像の説明を入力

残念ながら、私はこれで終わります：

ここに画像の説明を入力

ここに私の仕様があります：

境界線なしで設定される画像を含む div と、1 ピクセルの境界線を持つテキストを含む div を取得しようとしています。

ここに私が設定したdivがあります：

<section id="row2">

    <div id="textBox1" class="column left">
        <p> TEXT BOX 1 </p> 
    </div> <!--#textBox1 .column.left-->

    <div class="column right">
                <img src="assets/top-right-image.png"/>
            </div>

</section> <!--#row2-->

<section id="row3">

    <div class="column left"><img src="assets/bottom-left-image.png"/></div>

    <div id="textBox2" class="column right">
        <p> TEXT BOX 2 </p>
    </div>

</section> <!--#row3-->

ご覧のとおり、ID「textBox1」と「textBox2」でテキスト div を設定しました。残念ながら、これはそれらを爆破し、#row3 の div.column.left を右揃えにします。

CSSは次のとおりです。

.column {
     float: left;
     position: relative;
     margin: 20px 11px;
}

.left {
     width: 408px;
}

.right {
     width: 449px;
}

#bannerPic {
     padding: 0px 15px;
}

#row2 div {
     height: 352px;
}

#row3 div {
     height: 598px;
}

#textBox1 {
    border: 1px solid #BCBCBC;
    margin-bottom: 20px;
}

#textBox2 {
    border: 1px solid #BCBCBC;
}

どこが間違っていますか？

4

2 に答える 2

1

上の 2 つのアイテムの高さがまったく同じではない可能性が高いため、3 番目のアイテム (背の高い写真) が最初のアイテムに「ぶら下がっています」。これは、float の動作が原因で発生します。すべての境界線、マージン、パディングなどを含め、各行の部分 (div) がまったく同じ高さにレンダリングされていることを確認してください。

もう 1 つのオプションは、セクション タグを「クリア」することです。コンテンツの一部がテキストであるため、これははるかに簡単です。それはおそらくとにかく簡単です。:)

section { clear: both }
于 2012-06-05T19:33:19.170 に答える
1

次のスタイル カスケードを追加してみてください。

section {
  clear: both;
}

フロートをクリアし、各行を余白にリセットします。

于 2012-06-05T19:35:01.987 に答える