Question

hr标记的内容围绕浮动元素流动，就像它是内联元素一样（即使它实际上是块）。这就是我的需要，但不幸的是hr除了两个伪元素外，不能拥有子元素。

在JsFiddle上查看此演示：http://jsfiddle.net/P3KEZ/

<div id="right"></div>
<div class="divider"></div>
<hr class="divider" />

#right{
    background: #ffaaaa;
    width: 200px;
    height: 300px;
    float: right
}

.divider {
    background: #4d9d4d;
    height: 20px;
    border: none;
    position: relative;
}

.divider:after, .divider:before {
    content: " ";
    width: 20%;
    height: 100%;
    display: inline-block;
    position: absolute;
    background: #a2a2f2;
    top: 0;
}

divider:before {
    left: 0;
}

.divider:after {
    right: 0;
}

我真正想要的是获取包含浮动元素的内容流的元素（如hr do），但也可以包含至少3个子元素（如div可以这样做）。

所以问题是：如何在div中模仿这种行为？（没有display: flex）

Answer 1

我真正想要的是获取包含浮动元素的内容流的元素（如hr do），但也可以包含至少3个子元素（如div可以这样做）。

所以问题是：如何在div中模仿这种行为？

你想要获得强大的overflow财产的力量......（* thunderclap *）

.divider {
    /* … */
    overflow:hidden;
}

通常情况下，一个块元素在后面放置一个浮动元素，只有它的内联内容浮动在浮动元素旁边 - 但是overflow:hidden你可以改变它，这样一个块像div这样的元素只占用浮动元素旁边的空格。（它实际上不一定是hidden - 除了默认值visible之外的所有内容都会触发此行为，因此如果符合您的要求，您也可以使用auto或scroll实际用例更好。）

见这里：http://jsfiddle.net/P3KEZ/1/

在div和hr中浮动内容

1 个答案: