CSS Word Wrap 没有按预期工作

Question

基于我之前的 thread我正在尝试使用并理解使用溢出元素水平对齐两个 div 的推荐方法。

对于我的短文本，两个 div 正确对齐，但是当我添加孤独的文本时，它会下降到图像下方。谁能解释为什么会这样，我该如何解决？

我的 JSFIDDLE

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

float 会展开以尝试包含其内容。它们通常会扩展到包含区域的宽度，而不管它们的位置如何。这就是当文本很长时它会换行的原因。

对于您正在做的事情，我相信您希望图像位于某些文本的左侧。这是通过使用 clearfix CSS 设置外部区域(始终包含所有 float )来完成的:

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

然后，只将图像向左浮动。不要 float 您的内容。根据需要在图像周围添加边距。所以像这样:

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

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