阻止div重叠 [英] Stop divs from overlapping

问题描述

我用div包裹了三个连续的图像.链接位于第一个div下面的单独的 div 中.

I have a three images in a row wrapped by a div. A link is in a separate div below the first div.

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

我遇到的问题是，当浏览器足够宽时，图像应位于链接上方的水平行中.

The problem I am having is that when the browser is wide enough, the images are ina horizontal row above the link as they should be.

当宽度小于三幅图像时，尽管链接保持原样，并且图像显示在该链接上方和通过链接的一列中.

When the width is smaller than the three images though the link staysright where it was and the images show up in a column over and through the link.

我希望这些图像排成一行，并使链接保持在图像下方.

I want the images to stay in a row and have the link stay under the images.

核心概念是什么?我已经尝试了好几件事，没有运气.

What is the core concept? I have tried several things with no luck.

推荐答案

从#images中获取硬高度值:

Take the hard height value out of #images:

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

高度值迫使div内的图像溢出，随后溢出到链接div上.

The height value was forcing the images inside the div to overflow, and subsequently overflow onto the link div.

这篇关于阻止div重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！