Question

我有一个问题，图像显示在不对齐下面的不同高度和文本。这是标记，我有一个六行容器来显示6个图像

mETName.setTextColor(getColorDecimal(context));

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

           <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>

Answer 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>

图像不对齐且高度不同

1 个答案: