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/

Answer 2

使用float代替position:absolute，然后您需要clear .convo-container内的所有浮点数（请参阅演示：clearfix类）以获取自动高度取决于您的内容。

DEMO：http://jsfiddle.net/Cy98P/

Answer 3

有两种方法可以解决这个问题。

您可以将.convo-left和.convo-right的排名从position:absolute;更改为position:relative;

或者您也可以采用不同的方式解决问题，而不是在.convo-left和.convo-right类上使用任何定位。相反，您可以将.convo-container的宽度设置为100％，并将float:left;添加到.convo-container, .convo-left .convo-right

这是CSS：

.convo-container{float:left;width:100%;padding-left: 5px;padding-right: 5px;padding-top: 5px;background-color:red;}
.convo-left{width: 32px;height: 32px;float:left;}
.convo-right{float:left;padding-left:5px;vertical-align:top;}

要么解决你的问题，

css将div与内容重叠

3 个答案: