CSS列表扩展到与div中的内容相同的高度

Question

我有一个div，它有两个分别向左/右浮动的div。右侧div包含大量文本，左侧div包含3个图像。

我正在努力使三个图像在文本的顶部，中间和底部分布，因此如果添加更多文本，那么图像将移动到“正确填充空间”

我左边有一个'ul'，如果我设置了height:200px;属性，它会正确显示，但是我无法动态地匹配另一个div的高度！我已经尝试使用％并尝试+1000 -1000填充/边距黑客，但这似乎没有达到预期的效果，所以我必须咆哮错误的树。 （我整个上午都搜索了这个，我可以让div工作，但不能与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
}

并删除了你拥有它们的table-cell道具。