Question

基于我之前的thread我试图使用并理解使用overflow元素水平对齐两个div的推荐方法。

使用我的短文本，两个div正确对齐，但是当我添加单独的文本时，它会下降到图像下方。任何人都可以解释为什么会这样，我该如何解决？

HTML：

<div class="container" style="overflow: hidden; width: 100%">
<div class="left">
    <img src="http://localhost/new/img/sampleimg.png" class="wall-thumb-small" />
</div>
<div class="right">
    <div style="word-wrap: break-word;">Some long text here Some long text here Some long text here Some long text here Some long text here </div>
</div>
</div>

CSS：

div.container {
border: 1px solid #000000;
overflow: hidden;
width: 100%;
}

div.left {
padding:5px;
float: left;
}

div.right { 
float: left;
}

.thumb-small{
width:35px;
height:35px;
border: 1px solid #B6BCBF;
}

Answer 1

Floats扩展以尝试包含其内容。它们通常扩展到包含区域的宽度，无论它们如何定位。这就是为什么当文本很长时它会进入一个新的行。

对于你正在做的事情，我相信你想要一些文字左边的图像。这是通过将外部区域设置为clearfix CSS（以始终包含所有浮动）来完成的：

.container {
  overflow: hidden;
  min-width: 1px;
}
/* IE7+ */
*+html .container {
  min-height: 1%;
}

然后，只将图像浮动到左侧。不要漂浮你的内容。根据需要在图像周围添加边距。如下所示：

.left {
  float: left;
  margin: 0 10px 10px 0; /* 10px on right and bottom */
}

div中的内容将按照您的预期行事。

Answer 2

删除长文本（ jsFiddle example ）上的浮动规则。当en元素在另一个浮动元素之后浮动时，它不能垂直于它之前。

<div>
    <div style="word-wrap: break-word;">Some long text here Some long text here Some long text here Some long text here Some long text here </div>
</div>

有关长版本的信息，请参阅W3：

浮箱的外顶部可能不高于外顶部由先前的元素生成的任何块或浮动框的来源文件。

Answer 3

您必须设置max-width属性以限制文本格式占用尽可能多的空间，并获得最大空间以进入下一行。

http://jsfiddle.net/a6BbD/1/

<div class="container" style="overflow: hidden; width: 100%">
    <div class="left">
        <img src="http://localhost/new/img/sampleimg.png" class="thumb-small" />
    </div>
    <div class="right">
    <div style="word-wrap: break-word;max-width:400px">Some long text here Some long text here   Some long text here Some long text here Some long text here </div>
    </div>
</div>

<br>

<div class="container" style="overflow: hidden; width: 100%">
    <div class="left">
        <img src="http://localhost/new/img/sampleimg.png" class="thumb-small" />
    </div>
    <div class="right">
    <div style="word-wrap: break-word;">Some short text here</div>
    </div>
</div>

Answer 4

删除规则上的float:left;即可。但是，您可能希望改进并测试即6+。

Answer 5

建议说你应该总是在浮动元素上设置宽度。以下链接有很好的材料来理解花车..

      http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/

CSS Word Wrap无法按预期工作

5 个答案: