图片未对齐且高度不同

Question

我遇到了图像以不同高度显示且下方文本未对齐的问题。这是标记，我有一个六行容器来显示 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>

我将每个 post 设置为 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;
}

Answer 1

如果您可以更改节点的布置，则可以使用以下方式对齐图像下方的文本：显示: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>

图片未对齐且高度不同

Images do not align and are different heights

css

height

image

overflow

alignment