CSS列表擴展到與div中的內容相同的高度

Question

我有一個div，它有兩個分別左右浮動的div。正確的div包含很多文本，左邊的div有3個圖像。

我試圖使三個圖像分佈在文本的頂部，中間和底部，以便如果添加更多文本，圖像將移動到'正確填充空間'

我在左邊有一個'ul'，如果我設置了height:200px;屬性它顯示正確，但我無法讓它匹配其他div的動態高度！我嘗試過使用％，並嘗試+1000 -1000填充/邊距黑客，但似乎並沒有達到預期的效果，所以我必須咆哮錯誤的樹。 （我已經搜索了整個上午，我可以讓div工作，但不是ul的高度來匹配div！）。

的jsfiddle：jsfiddle.net/b98Rx/3/

HTML：

<div id="articleBody"> 
<div id="articleMainText"> 
    <p>This is some text that should overflow to the some space below here</p> 
</div> 
<div id="articleMainImages"> 
    <ul id="articleMainImagesUL"> 
     <li><span><img src="http://phrogz.net/tmp/gkhead.jpg"></span></li> 
     <li><span><img src="http://phrogz.net/tmp/gkhead.jpg"></span></li> 
     <li><span><img src="http://phrogz.net/tmp/gkhead.jpg"></span></li> 
    </ul> 
</div> 

CSS：（在小提琴）

實施例作爲圖像：

對不起，MSPaint，但我希望它顯示了我想要做的！

我接受其他建議，我不必使用ul/li。理想情況下儘可能兼容！我可能會將它製作成2列表格，併爲每個圖像製作三個單獨的div，以對齊頂部，中部和底部！這會工作嗎？

編輯： 解決它自己，看看這個小提琴爲我做了它！ http://jsfiddle.net/B63Yy/

Answer 1

工作是有嵌套的div什麼威力，並具有圖像作爲背景，連接至頂部，中部和底部 - 儘管他們不會打印到紙上。如果你的目標是支持多個背景CSS的瀏覽器，那就使用它。

如果文字太短，圖像會開始重疊 - 除非您強制執行最小高度，否則無法使用。

否則我認爲你正在看javascript來做到這一點。

任何人都知道更好嗎？

更新：這種有點...需要拋光。

<div id="articleBody"> 
    <div id="articleMainText"> 
     <div id="a"><div id="b"><div id="c"> 
     <p>This is some text that should overflow to the some space below here. This is some text that should overflow to the some space below here. This is some text that should overflow to the some space below here. This is some text that should overflow to the some space below here</p> 
      </div></div></div> 
    </div> 
</div> 

#articleBody { /* Body of article */ 
    display:block; 
    width:200px; 
    overflow:auto; 
    background-color:#ecd; 
} 
#articleMainText { /* Main text DIV */ 
    width:10em; 
    margin-right:32px; 
    padding-left:32px; 
    margin-top:0px; 
    padding-top:0px; 
} 
#a, #b, #c { 
    background-image: url("http://phrogz.net/tmp/gkhead.jpg"); 
    background-repeat: no-repeat; 
    background-size:20px 20px; 
} 

#a{background-position: left top} 
#b{background-position: left center} 
#c{background-position: left bottom} 

Answer 2

我已經編輯你的提琴工作：

http://jsfiddle.net/b98Rx/7/

我改變的是：

#articleMainImages img { 
    bottom:0;position:absolute; 
} 

#articleMainImagesUL li { 
    height:33%; 
    position:relative 
} 

和刪除，你有他們的表單元格的道具。