html - div 和 hr 中的 float 内容

Question

hr 标签的内容围绕 float 元素流动，就好像它是内联元素(即使它实际上是 block )。这就是我所需要的，但不幸的是 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;
}

我真正想要的是获取内容围绕 float 元素流动的元素(如 hr 做的)但也可以有至少 3 个子元素(如 div 可以做)。

所以问题是:如何在 div 中模拟这种行为？ (没有 display: flex)

Answer 1

What I actually want is to get element with content flow around the floating elements (like hr do) but also can have at least 3 child elements (like div can do).

So question is: how to emulate such behaviour in div?

您想收获 强大的 overflow 属性的力量……(*thunderclap*)

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

通常， block 元素位于 float 元素后面，只有它的内联内容 float 在 float 元素旁边——但是使用overflow:hidden你可以改变它, 所以像 div 这样的 block 元素只占用 float 元素旁边的空间。 (它实际上不必是 hidden——除了默认值 visible 之外的所有内容都会触发此行为，因此您可以使用 auto 或 滚动如果那些更适合您的实际用例。)

参见此处:http://jsfiddle.net/P3KEZ/1/