0

次のように、ボックスの最後に背景画像を指定したいフロート要素に問題があります。

+--------------------+    +-------------------+     +---------------------+
|                    |    |                   |     |                     |
|                    |    |                   |     |                     |
+--------------------+    +-------------------+     +---------------------+
  ================           ==============            =================

しかし、これは次のようになります。

===========================================================================
+--------------------+    +-------------------+     +---------------------+
|                    |    |                   |     |                     |
|                    |    |                   |     |                     |
+--------------------+    +-------------------+     +---------------------+
===========================================================================

ここでは、画像の代わりに border プロパティを使用しました。デモ

4

4 に答える 4

1

clearスペーサーに a を追加する必要があります。

.spacer {clear: both;}

http://jsfiddle.net/p7mBk/7/

于 2013-05-03T11:15:02.437 に答える
0

私がこれを書いている間にここにいるみんなが示唆したように、スペーサーを の中に入れなければなりませんdiv。それ以外の場合、それがどこに属し、どの幅を使用するかがわかりません。スペーサーの外側に赤い境界線を表示したい場合は、コンテンツに別の div を追加するだけです。

<column>
    <border>
        <text/>
    </border>
    <spacer/>
</column>
于 2013-05-03T11:22:34.653 に答える
0

私はあなたのコードを修正し、すべての要素を浮かせました。結果は次のとおりです。http://jsfiddle.net/p7mBk/3/

CSS

.cf:before, .cf:after{display: table; content: " ";}
.cf:after{clear: both;}
.cf{zoom: 1;}

.mainb{width: 1000px;}
.fleft{float: left; width: 300px;}
.fright{float: left; width: 300px;}
.midcol{float: left;width:310px;}
.fleft, .fright, .midcol{border: 1px solid red;}
.spacer{border: 1px solid gray; border-top: 0; background: blue; height: 2px; margin: 0 12px;}

HTML

<div class="mainb cf">
    <div class="fleft">
        <h3>Latuis Congue Estaer</h3>
        <img src="" alt="" />
        <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur congue blandit diam sed ullamcorper. Morbi vitae metus a purus rhoncus egestas ac sit amet velit. Sed ac eros eu tellus adipiscing consectetur a ut mi. Nunc imperdiet pretium metus ac auctor. </p>
        <p class="alt"><a href="#">More</a></p>
        <div class="spacer"></div>
    </div>
    <div class="fright">
        <h3>Latuis Congue Estaer</h3>
        <img src="" />
        <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur congue blandit diam sed ullamcorper. Morbi vitae metus a purus rhoncus egestas ac sit amet velit. Sed ac eros eu tellus adipiscing consectetur a ut mi. Nunc imperdiet pretium metus ac auctor. </p>
        <p class="alt"><a href="#">More</a></p>
        <div class="spacer"></div>
    </div>

    <div class="midcol">
        <h3>Latuis Congue Estaer</h3>
        <img src="" />
        <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur congue blandit diam sed ullamcorper. Morbi vitae metus a purus rhoncus egestas ac sit amet velit. Sed ac eros eu tellus adipiscing consectetur a ut mi. Nunc imperdiet pretium metus ac auctor. </p>
        <p class="alt"><a href="#">More</a></p>
        <div class="spacer"></div>
    </div>
</div>

それはあなたが望むものかもしれません。

于 2013-05-03T11:13:42.193 に答える