基于我之前的thread我试图使用并理解使用overflow元素水平对齐两个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;
}
答案 0 :(得分: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中的内容将按照您的预期行事。
答案 1 :(得分:1)
删除长文本( 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:
浮箱的外顶部可能不高于外顶部 由先前的元素生成的任何块或浮动框的 来源文件。
答案 2 :(得分:0)
您必须设置max-width属性以限制文本格式占用尽可能多的空间,并获得最大空间以进入下一行。
<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>
答案 3 :(得分:0)
删除规则上的float:left;
即可。但是,您可能希望改进并测试即6+。
答案 4 :(得分:0)
建议说你应该总是在浮动元素上设置宽度。 以下链接有很好的材料来理解花车..
http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/