無固定高度溢出DIV內容

我有兩個div：左和右。在左邊有一個長文本。在右邊有一些關於文本的註釋（更多div）。如果左邊的文字比註釋長，我喜歡它。但是當註釋大於/長於左邊的div時，我想讓正確的div內容溢出。無固定高度溢出DIV內容

換句話說：兩個div沒有固定的高度，使溢出正確的一個。

的代碼是高於還是JSFiddle

<div id="container"> 
    <div id="left">Some long-long text, allways to show</div> 
    <div id="right">Some divs not necessarily show all</div> 
</div>

CSS：

#container { 
    background-color:white; 
    float:left; 
} 

#left { 
    width: 79%; 
    float:left; 
} 

#right { 
    width: 19%; 
    float:right; 
    overflow: hidden; 
}

但它不工作。 :(

來源

2013-05-22 borazslo

JSFiddle請！ – mikeswright49

這裏：[JSFiddle.net]（http://jsfiddle.net/borazslo/B2cch/） – borazslo

澄清，你想左邊的div無限期擴大其內容，右邊的div擴大到這個高度左邊的div，但沒有進一步？ – Abernasty

正如揚在他最後的評論所說，我認爲你需要使用JavaScript或jQuery來做到這一點

。

這question概述使用由OP接受的JavaScript的方法，雖然OP對他執行的過程中也未作評論。

我已經修改了js fiddle從這個answer到了類似的問題。

它使用以下：

CSS

#main{ 
    width:auto;  

} 

#one{ 
height:auto; 
width:200px; 
display:inline-block; 
float:left; 

} 
#two{ 
height:100%; 
width:200px; 
float:left; 
display:inline-block; 
overflow: auto; 

} 

div{ 
border:1px solid black; 
}

的Javascript

$(document).ready(function() { 

     $("#main").css("height",$("#one").height()); 


});

而且我相信你的地址，所期望的結果。

來源

2013-05-22 15:48:58 Abernasty

您必須使用溢出：隱藏在#left，而不是#right

來源

2013-05-22 13:46:13 veelen

對不起，這不容易。 :(可能我把div的文本誤解了，所以我改變了它們。） – borazslo

你有更詳細的代碼版本嗎，也許http://jsfiddle.net/就像@ mikeswright49提出的那樣？ – veelen

這裏： [JSFiddle of the problem]（http://jsfiddle.net/borazslo/B2cch/） – borazslo

無固定高度溢出DIV內容

回答

相關問題