1

我注意到一个烦人的事情是在页面的两侧竞争浮动。

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

小提琴 A , 小提琴 B

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

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

我对这种布局的问题是文本没有紧紧地包裹在蓝色块上，而是包裹在容器周围。

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

但是，您可以看到左侧的图像现在被向下推，因此它从与蓝色 div 相同的 y 坐标开始，这不是我想要的。

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

谢谢。

4

1 回答 1

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/

于 2013-06-25T21:08:32.427 回答