将图像与每个图像下方的文本连续对齐 [英] Aligning images in a row with text below each image

问题描述

简而言之，我正在尝试实现类似于以下的设计：

In short, I'm trying to achieve a design similar to this:

其中白色方框是图像，红色画笔是文本行（第一行将包含一个名称并在其专业名称下面），但事实证明使用div是有问题的，因为我无法使内容在适当的行中对齐-由于兼容性问题，我不太热衷于将表用于此类操作，因此我希望这里的某个人能够帮助我尝试使其与div配合使用，然后再使用它。

Where the white boxes are images, and the red brushes are lines of text (the top line would hold a name and underneath their specialty) but using divs has proven to be problematic as I can't get the content to line up in a proper row - I'm not too keen on using a table for something like this due to compatibility problems, so I'm hoping someone on here would be able to assist me in trying to get it to work with divs before I fall back to that.

下面是我的代码

<div id="design-cast">
     <h4>Design</h4>

    <div class="member">
        <img src="http://i.imgur.com/OBUL7se.jpg" class="img-responsive img-thumbnail" alt="Responsive image" />
        <div class="name">Name
            <br />Description</div>
    </div>
    <div class="member">
        <img src="http://i.imgur.com/OBUL7se.jpg" class="img-responsive img-thumbnail" alt="Responsive image" />
        <div class="name">Name
            <br />Description</div>
    </div>
    <div class="member">
        <img src="http://i.imgur.com/zmPeyso.png" class="img-responsive img-thumbnail" alt="Responsive image" />
        <div class="name">Name
            <br />Description</div>
    </div>
</div>

CSS

.member {
    display: inline;
}
.name {
    display: inline;
}
.member img {
    width: 13%;
    display: block;
}

jsfiddle

推荐答案

在 .member上设置宽度元素，然后 float 个元素。

jsFiddle示例 -响应迅速。

jsFiddle example - it works responsively.

注意，请注意如果图像的尺寸不同，则注释也将在底部对齐。

Notice, as pointed out in the comments, this also aligns the text at the bottom if the images are of differing demensions.

更新后的CSS

#design-cast {
    position: relative;
    overflow: hidden;
}

.member {
    float: left;
    width: 31%;
    margin: 1% 1% 45px 1%;
}

.name {
    position: absolute;
    bottom: 0px;
}

.member img {
    width: 100%;
    display: block;
}

这篇关于将图像与每个图像下方的文本连续对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！