图像不对齐并且高度不同答案

【问题标题】：Images do not align and are different heights图像不对齐并且高度不同
【发布时间】：2016-11-26 15:14:02
【问题描述】：

我遇到了图像以不同的高度显示且下方的文字未对齐的问题。这是标记，我有一个六行容器来显示 6 个图像

           <div class="row">
                <div class="posts">
                    <img src="images/bond.jpg" alt="quantum of solace">
                    <h3 class="title">Quantum of Solace</h3>
                    <p class="post-info">PG13 | 106min</p>
                </div>
            </div>

我将每个帖子设置为 14%，因为其中有 6 个帖子允许 2.5% 的保证金。我试图将图像包装在一个 div 中并将其设置为溢出隐藏，但没有奏效。

.row {
    width: 100%;
}

.posts {
    width: 14%;
    float: left;
    margin-right: 2.5%;
}
.posts img {
    width: 100%;
    max-width: 100%;
    border-radius: 0.5em;
}

【问题讨论】：

在this fiddle 中似乎可以正常工作。您可以发布一个演示该问题的 sn-p 吗？
是的，但是你使用的图像都是相同的比例，我的不是
Ehm...所以您的抱怨是具有不同高度的图像以不同的高度显示？那不是很清楚。那你想要什么？是否要垂直拉伸某些图像以适应其他图像的高度？

标签： css image alignment height overflow

【解决方案1】：

如果您可以更改节点的布置，您可以使用以下命令对齐图像下方的文本：display:table。请参阅下一个示例：

.table {
    display: table ;
}

.row {
    display: table-row ;
}

.header, .title, .post-info {
    display: table-cell ;
    width: 14%;
    padding: 0 1.25% 0.25% 1.25% ;
    vertical-align: top ;
}

.header img {
    max-width: 100%;
    border-radius: 0.5em;
}

<div class="table">
    <div class="row">
        <div class="header">
            <img src="https://upload.wikimedia.org/wikipedia/en/2/2d/Quantum_of_Solace_-_UK_cinema_poster.jpg" alt="quantum of solace">
        </div>
        <div class="header">
            <img src="https://upload.wikimedia.org/wikipedia/en/6/66/E_t_the_extra_terrestrial_ver3.jpg" alt="E.T. the Extra-Terrestrial ">
        </div>
        <div class="header">
            <img src="https://upload.wikimedia.org/wikipedia/en/a/a2/Star_Wars_The_Force_Awakens_Theatrical_Poster.jpg" alt="Star Wars VII">
        </div>
        <div class="header">
            <img src="https://upload.wikimedia.org/wikipedia/en/8/8e/DisneyCheshireCat.jpg" alt="Alice in Wonderland">
        </div>
        <div class="header">
            <img src="https://upload.wikimedia.org/wikipedia/en/6/6c/XFilesMoviePoster.jpg" alt="The X-Files">
        </div>
        <div class="header">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/27/Poster_-_Gone_With_the_Wind_01.jpg/440px-Poster_-_Gone_With_the_Wind_01.jpg" alt="Gone with the Wind">
        </div>
    </div>
    <div class="row">
        <h4 class="title">Quantum of Solace</h4>
        <h4 class="title">E.T. the Extra-Terrestrial </h4>
        <h4 class="title">Star Wars: Episode VII The Force Awakens</h4>
        <h4 class="title">Alice in Wonderland</h4>
        <h4 class="title">The X-Files: Fight the Future</h4>
        <h4 class="title">Gone with the Wind</h4>
    </div>
    <div class="row">
        <p class="post-info">PG13 | 106min</p>
        <p class="post-info">G | 115min</p>
        <p class="post-info">PG13 | 136min</p>
        <p class="post-info">G | 187min</p>
        <p class="post-info">PG13 | 121min</p>
        <p class="post-info">G | 238min</p>
    </div>
</div>

【讨论】：