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