html - css 位置固定在区域内的某个位置

Question

我正在使用 asp.net 和 html 在商店网站上制作产品列表。 我的元素显示正常，但我不喜欢按钮的外观因产品名称长度而错位。

无论如何，我都试图将详细信息按钮固定在底部，就像产品 1,3 和 5 上的框一样。 其他产品的名称将文本向下推。

这些是我有问题的 CSS。

#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