定位图像，使其与宽度和高度相匹配

Question

你好我试图在这张照片后面定位我的照片，但看起来不一样。请有人给我一个小费。 This is how it should look

And this is how my version looks

这是我的代码

<img src="img3.png" alt="img3" width="30%" height="364px">

<img src="img2.png" alt="img2" width="30%" height="590px">

<img src="img3.png" alt="img3" width="30%" height="364px">

<img src="img2.png" alt="img2" width="30%" height="590px">

<img src="img3.png" alt="img3" width="30%" height="364px">

<img src="img2.png" alt="img2" width="30%" height="590px">

Answer 1

您可以将网站划分为三列。

第1列包含一个小图像和一个高图像，第2列和第3列相同。

然后它应该是这样的：

<div class="columns">
<img class="imgcolumnsmall" src="img3.png" alt="img3" width="30%" height="364px">

<img class="imgcolumntall" src="img2.png" alt="img2" width="30%" height="590px">
</div>

<div class="columns">
<img class="imgcolumnsmall" src="img3.png" alt="img3" width="30%" height="364px">

<img  class="imgcolumntall"src="img2.png" alt="img2" width="30%" height="590px">
</div>

<div class="columns">
<img class="imgcolumnsmall" src="img3.png" alt="img3" width="30%" height="364px">

<img class="imgcolumntall" src="img2.png" alt="img2" width="30%" height="590px">
</div>

你可以为每一列单独调用它们'column1'等等。

对于CSS来说非常简单：

.columns {
float:left;
overflow: hidden;
background-color: #ff00ff;
}

img.imgcolumntall {
display: inline;
width: 30%;
height: 590px;
}

img.imgcolumnsmall {
display: inline;
width: 30%;
height: 364px;
}