html - 名称位于图像底部的 CSS 图片库

Question

我正在尝试制作一个图片库，图片名称位于图片底部。到目前为止，我一直没有成功。

期望结果图片:

HTML:

<!-- start content -->
    <div class='content'>
        <div class='photo'>
            <div class='image'><a href='#'><img src='https://i.imgur.com/PC68FSTb.jpg' alt='profile picture' width='300' height='300'></a></div>
            <div class='photo-name'>Name</div>
        </div>
        <div class='photo'>
            <div class='image'><a href='#'><img src='https://i.imgur.com/PC68FSTb.jpg' alt='profile picture' width='300' height='300'></a></div>
            <div class='photo-name'>Name</div>
        </div>
        <div class='photo'>
            <div class='image'><a href='#'><img src='https://i.imgur.com/PC68FSTb.jpg' alt='profile picture' width='300' height='300'></a></div>
            <div class='photo-name'>Name</div>
        </div>
        <div class='photo'>
            <div class='image'><a href='#'><img src='https://i.imgur.com/PC68FSTb.jpg' alt='profile picture' width='300' height='300'></a></div>
            <div class='photo-name'>Name</div>
        </div>
        <div class='photo'>
            <div class='image'><a href='#'><img src='https://i.imgur.com/PC68FSTb.jpg' alt='profile picture' width='300' height='300'></a></div>
            <div class='photo-name'>Name</div>
        </div>
    </div>
    <!-- end content -->

CSS:

.content {
    background-color: #404040;
    width: 940px;
    margin: 0 auto;
    padding: 20px 10px;
    overflow: hidden;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

.photo {
    border-radius: 6px;
    border: 1px solid #ccc;
    width: 298px;
    height: 298px;
    margin-top: 10px;
    margin-left: 10px;
    float: left;
    overflow: hidden;
    position: relative;
}

.photo-name {
    /*margin-top: 245px;*/
    /*padding: 0.5em;*/
    text-align: center;
    background-color: cyan;
    /*background-color: #666666;*/
}

结果:https://jsfiddle.net/h3x2ooax/

Answer 1

您需要为该文本元素指定一个绝对位置、100% 宽度和所需的 bottom 距底部边框距离的设置:

.photo-name {
  position: absolute;
  width: 100%;
  bottom: 30px;
  text-align: center;
  background-color: cyan;
}

https://jsfiddle.net/1mp8k1by/