清除浮动按下

我注意到一个恼人的事情与页面的相反两侧的竞争浮游物。清除浮动按下

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

在摆弄例如，你可以看到，左边的图像是在顶部，并在同一水平绿色的块。在这种情况下，绿色和蓝色的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相同的y坐标处开始，这不是我想要的。

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

谢谢。

来源

2013-06-25 Taylor Hadden

移动.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-25 21:08:32

我会做到这一点，但我不知道是否该图像将存在与否。这是一个博客页面，我想确保设计允许任何图像分类。如果这是我唯一的选择，那么我将会使用第一个示例。 –

清除浮动按下

回答

相关问题