Question

我正在学习HTML和CSS，我想有2张彼此相邻的照片。不幸的是，第二张照片低于第一张照片。

.container{
	width:80px;
	margin:0 auto;
	justify-content:center;
	display:flex;	
}

<div class="containers">
   <img src="http://placehold.it/300" class="card_img"></img>
</div>
<div class="container">
  <img src="http://placehold.it/300" class="card_img"></img>
</div>

Answer 1

请检查此代码，希望它对您有用。图像的最大高度仅用于显示图像，尺寸较小。

.container{display: flex;display: -webkit-flex;justify-content: center;}
.container img { max-height: 150px;}

<div class="container">
    <img src="https://cdn.pixabay.com/photo/2018/06/30/09/31/background-image-3507320_960_720.jpg" class="card_img" />
    <img src="https://cdn.pixabay.com/photo/2018/06/30/09/31/background-image-3507320_960_720.jpg" class="card_img" />
  </div>

Answer 2

您的第一个div的类别为“容器”，而不是“容器”。您应该给两个相同的类名。

您还可以像这样在CSS中添加“ float：left”，以并排显示图像：

.container {
    width:80px;
    margin:0 auto;
    justify-content:center;
    display:flex;   
    float: left;
}

Answer 3

我对您的问题并不十分清楚。但是，如果您的意思是div并排对齐。您可以在课程中使用justify-content：flex-start。

.container{
    width:80px;
    margin:0 auto;
    justify-content:flex-start;
    display:flex;   
}

您将必须更改html：

<div class="container">
<div><img src="photo1.jpg" class="card_img" /></div>
<div><img src="photo1.jpg" class="card_img" /></div>
</div>

如果不想使用flexbox，可以使用float：left。我更喜欢flexbox。

如何将两张照片彼此相邻？

3 个答案: