html - css 将 div 与内容重叠

Question

我怎样才能让它们不重叠，我知道为什么会这样，因为 convo-container 没有高度，如果我给它一个高度，一切都很好，但 convo-right 需要高度取决于它的内容所以 convo-container 也是。 Convo 电源属性必须保持不变。我也想这样做，以便轻松定位宽度。谢谢

http://jsfiddle.net/mxadam/Zpz86/

CSS:

.convo-main {position: absolute; overflow-y: scroll; background-color: #fff; padding-bottom: 5px; top: 0; bottom: 50px;left:0; right: 0;}
.convo-container{left:0;right:0;padding-left: 5px;padding-right: 5px;padding-top: 5px;background-color:#000;}
.convo-left{position: absolute;width: 32px;height: 32px;padding-left: 0px;}
.convo-right{position: absolute;left: 37px;right:0;padding-left:5px;vertical-align:top;}

HTML:

<div class="convo-main">

<div class="convo-container">
    <div class="convo-left"><img src="http://www.clker.com/cliparts/d/L/P/X/z/i/no-image-icon-md.png" style="width: 32px; height: 32px;"></div>
    <div class="convo-right">text can be any height</div>
    </div>

<div class="convo-container">
    <div class="convo-left"><img src="http://www.clker.com/cliparts/d/L/P/X/z/i/no-image-icon-md.png" style="width: 32px; height: 32px;"></div>
    <div class="convo-right">text can be any height</div>
    </div>

 <div class="convo-container">
    <div class="convo-left"><img src="http://www.clker.com/cliparts/d/L/P/X/z/i/no-image-icon-md.png" style="width: 32px; height: 32px;"></div>
    <div class="convo-right">text can be any height<br />text can be any height<br />text can be any height<br /></div>
    </div>

<div class="convo-container">
    <div class="convo-left"><img src="http://www.clker.com/cliparts/d/L/P/X/z/i/no-image-icon-md.png" style="width: 32px; height: 32px;"></div>
    <div class="convo-right">text can be any height<br />text can be any height<br />text can be any height<br />text can be any height<br /></div>
    </div>

</div>

Answer 1

您想使用position: relative 而不是绝对定位。

根据您的描述，这将涉及更改

的相对位置

.convo-left
.convo-right

并保持.convo-main绝对定位

http://jsfiddle.net/Zpz86/2/