0

我想在框的末尾为其提供一些背景图像的浮动元素有问题，如下所示：

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

但这很可能是这样的：

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

我在这里使用了边框属性而不是图像。演示

4

4 回答 4

1

您需要在clear垫片中添加一个：

.spacer {clear: both;}

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

于 2013-05-03T11:15:02.437 回答
1

这是您想要实现的目标的解决方案。我刚刚修改了您的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>
于 2013-05-03T11:15:28.173 回答
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 回答
0

正如我写这篇文章时这里的每个人都建议的那样，你必须将垫片放在div. 否则，它不知道它属于哪里以及使用哪个宽度。如果您想在分隔符之外有红色边框，只需为内容添加另一个 div：

<column>
    <border>
        <text/>
    </border>
    <spacer/>
</column>
于 2013-05-03T11:22:34.653 回答