3

我有一个 div，它有两个分别向左/向右浮动的 div。右边的 div 包含很多文本，左边的 div 有 3 张图片。

我正在尝试使三个图像分布在文本的顶部、中间和底部，这样如果添加了更多文本，则图像将移动以“正确填充空间”

我在左侧有一个“ul”，如果我设置了height:200px;它正确显示的属性，但我无法让它动态匹配另一个 div 的高度！我尝试过使用 % 并尝试了 +1000 -1000 填充/边距 hack，但这似乎并没有达到预期的效果，所以我一定是找错了树。（我已经搜索了整个上午，我可以使 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/

4

2 回答 2

0

可能有用的是嵌套 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}
于 2013-06-24T13:30:34.623 回答
0

我已经编辑了你的小提琴来工作：

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

我改变的是：

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

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

并删除了您拥有它们的表格单元道具。

于 2013-06-24T13:35:45.733 回答