Question

我遇到浮动元素的问题，我想在框的末尾给出一些背景图像，如下所示：

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

但这很可能是这样的：

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

我在这里使用了border属性而不是图像。的 DEMO

Answer 1

您需要在垫片中添加clear：

.spacer {clear: both;}

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

Answer 2

以下是您想要实现的解决方案。我刚刚修改了您的CSS和HTML。检查这个小提琴：http://jsfiddle.net/sarfarazdesigner/p7mBk/5/

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: right;
    width: 300px;
}
.midcol {
    margin: 0 310px;
}
.cmnbrd {
    border: 1px solid red;
    margin-bottom:20px;
}
.spacer {
    border: 1px solid gray;
    border-top: 0;
    background: blue;
    height: 2px;
    margin: 0 12px;
}

HTML是

<div class="mainb cf">
    <div class="fleft">
        <div class="cmnbrd">
            <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>
        <div class="spacer"></div>
    </div>
    <div class="fright">
        <div class="cmnbrd">
            <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>
        <div class="spacer"></div>
    </div>
    <div class="midcol">
        <div class="cmnbrd">
            <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>
        <div class="spacer"></div>
    </div>
</div>

Answer 3

我修改了你的代码并浮动了所有元素。结果如下：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>

这可能就是你想要的。

Answer 4

正如大家在这里写的那样，你必须把垫片放在div里面。否则，它不知道它属于哪里以及使用哪个宽度。如果您希望在spacer之外设置红色边框，只需为内容添加另一个div：

<column>
    <border>
        <text/>
    </border>
    <spacer/>
</column>

将border-image底部放置到div

4 个答案:

CSS

CSS

HTML