Question

我注意到在页面两侧有竞争浮动的烦人事物。

我有两个jsFiddles来说明我的问题：

在小提琴A示例中，您可以看到左侧的图像位于绿色块的顶部和同一级别。在这种情况下，绿色和蓝色div位于容器内：

<div class="floatContainer" style="float: right">
    <div>Green Div</div>
    <div style="float: right; clear: right;">
        Blue Div
    </div>
</div>

我对此布局的问题是文本没有紧紧包裹在蓝色块上，因为它正在包裹容器。

在小提琴B示例中，我设法通过不浮动容器并单独浮动绿色和蓝色div来正确完成包装。为了使蓝色div低于绿色div，它当然有一个“clear：right”标签。

然而，您可以看到左侧的图像现在被按下，以便它以与蓝色div相同的y坐标开始，这不是我想要的。

那么，有没有办法让文本在绿色和蓝色div周围很好地包裹，同时仍然让最左边的图像正确定位？这似乎是一个CSS错误，因为它肯定不是我期望的行为。

感谢。

Answer 1

将.floatContainer移到.content内，使其位于<img>之后，以便不会被清除。

<div class="content">
    <img class="right" src="http://lorempixel.com/150/100" width="150" height="100">
    <div class="floatContainer">
        <div class="rightFloat">Stuff and things are long</div>
        <div class="rightFloat second">More Things</div>
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit

http://jsfiddle.net/gdFjy/3/

清理浮动推下来

1 个答案: