css與內容重疊divs

我怎麼能得到這些不保持重疊，我知道爲什麼，因爲convo容器doesnt有一個高度，如果我給它一個高度一切都很好，但convo-right需要的高度依賴於它的內容，convo-container也是這樣。 convomains屬性必須保持不變。我也希望通過這種方式來實現簡單的寬度定位。感謝css與內容重疊divs

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>

來源

2014-02-05 mxadam

嘗試刪除絕對定位。這消除了文檔的流動，容器高度不會改變。如果你想在容器中使用絕對定位，那麼父容器將需要'position：relative'。 – Goose

不要使用'position：absolute;' –

忽略絕對定位 –

你想用position: relative，而不是絕對定位。

根據你所描述的，這將涉及

.convo-left 
.convo-right

改變相對位置並保持.convo-main定位絕對

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

來源

2014-02-05 17:19:00

使用float代替position:absolute，那麼你需要clear每個漂浮在.convo-container（登入演示：clearfix課程）內取決於您的內容的汽車高度。

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

來源

2014-02-05 17:20:34

有解決這個問題的兩種方法。

您可以從position:absolute;都.convo-left和.convo-right的位置改變到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;}

要麼應該解決您的問題，

來源

2014-02-05 17:47:27 BenEgan1991

css與內容重疊divs

回答

相關問題