防止div重叠

Question

我有三张图片排成一行，被一个 div 包裹。一个链接在第一个 div 下面的另一个单独的 div 中。

http://jsfiddle.net/sGmjU/1/

我遇到的问题是，当浏览器宽度足够时，图片以水平行的方式位于链接上方，这是应该的。

但当宽度小于三张图片时，链接仍然保持在原来的位置，而图片会以列的方式出现在链接上方和下方。我希望图片保持在一行，并且链接在图片下方。

核心概念是什么？我尝试了几种方法都没有成功。

- FluxEngine

Answer 1

将#images中的硬高度值取出：

#images {
    width:50%;
    margin:auto;
    display:block;
    vertical-align:middle;
}

中的高度值导致图像溢出，随后溢出到链接

上。

- Lowkase

---

谢谢，这很有道理并且有效。不确定为什么有人投反对票，我知道这是一个简单的问题，但现在我明白了。 - FluxEngine

Answer 2

给图片的div添加clear:both;，并删除下面显示的宽度。

#images {

margin:auto;
display:block;
vertical-align:middle;
clear: both;

}

- sumit joshi