0

根据我之前的线程，我正在尝试使用并理解使用溢出元素水平对齐两个 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;
}
4

5 回答 5

1

删除长文本上的浮动规则（jsFiddle 示例）。当 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：

浮动框的外部顶部不得高于源文档中早期元素生成的任何块或浮动框的外部顶部。

于 2013-04-15T16:02:20.873 回答
1

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

对于您正在做的事情，我相信您希望图像位于某些文本的左侧。这是通过使用 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 中的内容将像您期望的那样运行。

于 2013-04-15T16:01:51.277 回答
0

删除float:left;规则，它将起作用。但是，您可能希望在 ie 6+ 中进行改进和测试。

于 2013-04-15T16:04:55.943 回答
0

您必须设置 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>
于 2013-04-15T16:02:30.597 回答
0

该建议说您应该始终在浮动元素上设置宽度。下面的链接有很好的材料来理解花车..

      http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/
于 2013-04-15T16:33:54.943 回答