如何讓右div高度等於動態大小的左div？

Question

見下面的自包含示例

的什麼，我試圖做的圖片，以及我實際得到：

我想創建CSS規則，使我的內容是這樣的（正確）：

我在努力尋找一個簡單的解決辦法上網，所以我的長相內容像這樣的（錯誤）：

我找不到計算器上或解決方案，它提供的解決方案，任何CSS博客：什麼我想要實現

摘要類似但不兼容的問題。

我有兩個浮動的div，左右排div。左邊的div包含一個伸展出來的圖像，直到左邊div的寬度。左div的高度取決於它包含的img。這是我希望正確的div符合的高度。我需要這種符合性，以便當右側div沒有更多空間時，溢出：隱藏代碼將隱藏多餘的文本。

固定高度是不允許的。 我正試圖避免此腳本爲。純CSS中有解決方案嗎？

CSS片斷

.left { 
    float:left; 
    width:50% 
} 

.right { 
    float:right; 
    width:50%; 
    background-color:darkgrey; 
    overflow:hidden; 
} 

img { 
    min-width:100%; 
    height: auto; 
    width: 100%;  
} 

正如你所看到的，我沒有任何代碼在這裏，因爲我已經嘗試了所有的解決方案都沒有奏效處理等於DIV的高度。

這裏是我的jsfiddle所以你可以看到這個問題：

http://jsfiddle.net/1upodwg9/

Answer 1

要使用overflow: hidden;容器需要規定的高度上，否則它不」不知道溢出的起點在哪裏。既然你想有一個動態圖像（不同高度），恐怕你必須使用JavaScript。

Answer 2

小提琴

http://jsfiddle.net/1upodwg9/14/

.child-row { 
     display:block;//added 
     background:red; 
    } 

    .left { 
     float:left; 
     width:50%; 
     height:100%;//added 
     display:inline-block;//added 

    } 

    .right { 
     width:50%; 
     background-color:darkgrey; 
    display: inline-block;//added 
    } 

小提琴例如，當你有更多的內容

http://jsfiddle.net/1upodwg9/15/

Answer 3

像這樣的事情fiddle？

$(window).resize(function() { 
var height = $("#leftDiv").css("height") 
$("#rightDiv").css("height", height); 
}); 

Answer 4

如果你只照顧到IE8 +和/或現代的瀏覽器可以使用顯示：表，顯示：錶行，顯示：表細胞

.parent { 
    margin: auto; /* helps place in middle */ 
    width: 70%; 
    display: table; 
} 

.child-row { 
    display: table-row; 
} 

.child-col { 
    display: table-cell; 
    vertical-align: top; 
} 

示例：http://jsfiddle.net/1upodwg9/16/

（對不起，我改變了圖像因爲某些原因，它沒有加載我的一端）

編輯：其實，它並不適用於當圖像太小工作（右山坳將設置高度）