css - 第一行有 2 个图像，下面的第二行有 3 个图像

Question

使用CSS，我想

• 将 2 个图像并排放置在第一行
• 将 3 个图像放在第二行 - 请参阅附图。

我尝试使用下面的 CSS，但这会导致 3rd 图像单独占据一行。

.profile-pic-row:nth-of-type(3){
    display: block;
}

.profile-pic-row {
    display: inline-block; 
}

如何使3rd 图像与以下4th 和5th 图像对齐？

Answer 1

当您将第三个图像定义为“ block ”时 - block 定义将其放在不同的行中，您需要放置“inline-block”。

如果您希望第三张图片与第一张和第二张图片的上一行分开，您可以`"clear: left":

.profile-pic-row{
    display: inline-block;
    float: left;
}
.profile-pic-row:nth-of-type(3){
    clear: left;
}

或者将 2 张图片放在一个 div 中，将 3 张图片放在另一个 div 中，然后将 div 定义为整行(使用“display:block”或“width:100%”)。

<div class="firstRow">
   <img class="profile-pic-row" />
   <img class="profile-pic-row" />
</div>
<div class="secondRow">
   <img class="profile-pic-row" />
   <img class="profile-pic-row" />
   <img class="profile-pic-row" />
</div>

此外，您可以将每个图像放入 div 或不同的组件中，并为第一张和第二张图片定义 50% 的宽度，为第二行图片定义 33% 的宽度。