Question

我试图让按钮位于div的底部。我使用position:absolute按钮并将父div设置为position:relative。

但由于某种原因，一旦内容向下延伸，底部的按钮就会重叠在内容上。我不确定导致它重叠的原因。

这是我的CSS：

.a{
width: 33%;
float: left;
border: 1px solid red;
position: relative;
text-align: center;
padding: 2%;
}

img {
display: block; 
width: 100%; 
max-width:150px; 
height: auto;
margin: 2% auto;
}

.button{
position: absolute;
bottom: 5px;
background: green;
display: block;
left: 50%;
width: 50%;
margin-left: -25%;
border-radius:10px;
}

我不确定它是否与在父元素上设置的初始高度有关。我知道每个div中的一些内容会有所不同，这将扩展div的高度。

我有一个jQuery脚本，它将检查最长的父div，然后检查其余的子元素以匹配最长的div，因此是内联高度。

我希望这是有道理的。这是一个漫长的夜晚。

Answer 1

http://jsfiddle.net/LHxeP/9/

按钮的绝对位置使按钮超过div内容因为你使用绝对位置，你必须增加div的高度（为按钮保留一些空间）

.a {
    width: 33%;
    float: left;
    border: 1px solid red;
    position: relative;
    text-align: center;
    padding: 2%;
    padding-bottom: 50px;
}

我添加padding-bottom: 50px;以保留一些底部空间...您可以更改该值，具体取决于按钮的大小

Answer 2

首先，如果可能，请不要使用内联CSS。将高度值放在'.a'类中（您也可以考虑重命名'.a'，因为它与链接元素<a>非常相似）。

其次，为了解决您的具体问题，请将“a”类的height属性设置为auto，它将适应您内容的高度。

.a{
  width: 33%;
  height: auto;
  float: left;

...

Answer 3

这是因为你在div中设置了一个固定的高度，所以当de div的内容超过设置的高度时，按钮的绝对位置会导致重叠。

如果你想要一个固定的高度，我建议使用overflow: scroll，你可以在内容的顶部和图像下面设置按钮。这样做您不需要将position:absolute设置为按钮。也许这不是最好的解决方案，但我希望这会有所帮助。

底部定位按钮重叠内容

3 个答案: