Question

我正在尝试创建一张带有图片的卡片，底部有一些文字。

<div href="#" class="card">
    <img src="http://placehold.it/180x150">
    <span>Events</span>
</div>

css目前如下。

div.card
{
    position: relative;
    display: inline-block;
}
    div.card span
    {
        position: absolute;
        bottom: 0px;
        left: 0px;
        z-index: 2;

        width: 100%;

        background-color: #000000;
        background-color: rgba(0, 0, 0, 0.5);

        color: #FFFFFF;
        font-weight: bold;
        text-align: center;
        text-decoration: none;
        text-transform: uppercase;
    }

我遇到的问题是跨度在实际图像下方几个像素处对齐，如http://jsfiddle.net/fe7Luaa6/中所示。我做错了什么？

Answer 1

~~正如this example所见，div.card比150px（图像的高度）高一点。~~

~~如果您明确将<div>的高度设置为this example中图像的高度，则会解决此问题。~~

实际上，一种更简单的方法（由this SO answer建议）表示这是因为默认情况下<img>是inline-block元素，这会导致容器的高度<div>的计算方式略有不同。

添加简单的img { display: block; }将是解决此问题的更简单方法，如this example所示。

底部对齐的元素= 0px

1 个答案: