第一行有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

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

如果您希望第3张照片与第1张和第2张照片的上一行分开，您可以“清除：左”：

.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％。

Answer 2

以下是我使用单个<ul>并且内容始终居中

的方法

  

Codepen demo

<强>标记

<ul>
   <li><img src="http://lorempixel.com/100/100/cats/" /></li>
   <li><img src="http://lorempixel.com/100/100/cats/" /></li>  
   <li><img src="http://lorempixel.com/100/100/cats/" /></li>  
   <li><img src="http://lorempixel.com/100/100/cats/" /></li>  
   <li><img src="http://lorempixel.com/100/100/cats/" /></li>
</ul>

<强> CSS

* { box-sizing: border-box; }

ul { 
   list-style: none; 
   font-size: 0; 
   margin: 0; 
   padding: 0; 
   text-align: center; 
}

li { 
   display: inline-block; 
   padding: 10px;
}

/* first and second list-item are 50% wide */
li:nth-child(1), li:nth-child(2) { width: 50%; }

/* change alignment of inner pictures */
li:nth-child(1) { text-align: right; }
li:nth-child(2) { text-align: left; }

/* just a bit of responsiveness */
li img { max-width: 100%; }
li:nth-child(n+3) { max-width: 30%; }

这里的诀窍是将前两个列表项的宽度设置为50%并更改它们的对齐方式，使第一个<li>与text-align: right对齐，第二个text-align: left （前两个图像并排显示）

<强>结果