css位置固定在区域内的位置

Question

我正在使用asp.net和html在商店网站上制作产品列表。 我的物品显示正常，但我不喜欢按钮的外观根据产品名称长度未对齐。

我试图将详细信息按钮固定在底部，就像它在产品1,3和5上的盒子一样。 其他产品的名称推动了文本。

这些是我的问题。

#GameCatalogue
{
    list-style-type:none;
}
#GameCatalogue li {
    /* http://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/ */
        width: 200px;
        min-height: 320px;
        border: 1px solid #000;
        display: -moz-inline-stack;
        display: inline-block;
        vertical-align: top;
        margin: 5px;
        zoom: 1;
        *display: inline;
        _height: 250px;
        border-radius: 7px;
}

.detailsButtom{
    position: relative;
    top: 25px;
/* i tried, vertical-height, alignment, position fixed, absolute, messed around with z-index,  as well as moving the items in different locations through my li containter. 
}

这是我的输出html（1项）

<li>
<div class="img">
<img alt="" src="../Images/mariou.jpg" id="Graphic1"> 
</div>
<div class="info">
<h3 id="Name" 1'="">SuperMario U</h3>
<p id="Descr1" data-description="Super Mario u is the latest installment of the classic mario franchise. up to 5 players simultaniously can traverse a vast world spanning over 90 unique levels.">
Super Mario u is the...</p>
<div class="price"><span class="st">Our Price:</span>
<strong id="price1">$45.99</strong>
</div><div class="actions"><a href="#details_popup" style="position: relative;top: 25px;" data-toggle="modal" class="btn btn-primary" data-prodcd"1"="">Details</a></div></div></li>

Answer 1

首先，请注意您发布的CSS代码与您发布的DOM不完全匹配（在DOM中您没有detailsButtom类的元素）。

---

要实现您想要的效果，您需要为要“粘贴”到底部的元素设置position: absolute。 然后，您需要将其容器的position设置为position: relative。现在，您可以根据需要设置内部元素的坐标（使用以下属性：left，top，right，bottom）。

---

因此，同样设置.detailsButtom（应该写成 bottom ）类：

.detailsButtom {
    position: absolute;
    bottom: 10px;
    left: 0; /* You can change these values */
}

并将容器的类设置为（我假设它是CSS中的li）：

#GameCatalogue li {
     position: relative;
}

---

进一步阅读

1. CSS Tricks - Absolute Positioning Inside Relative Positioning
2. Learn CSS Positioning in Ten Steps

Answer 2

对父元素使用position:relative，对我们想要手动更改定位的子元素使用position:absolute。当我们使用position属性时，我们必须确保使用其中一个组：

1. top，left属性
2. top，right属性
3. bottom，left属性
4. bottom，right属性

请不要同时使用（top，bottom）和（right，left）属性。