并排对齐图像（css + html）

Question

我希望能够并排放置四个图片而未成功。 顶部两个，底部两个。 我想确保它们与除移动设备以外的所有浏览器大小相同。 到目前为止，这是我的尝试

 #imageone{ position: absolute; top:0px; width: 50%; padding:0px; } #imagetwo{ position: absolute; width: 50%; left:50%; } #imagefour{ position: absolute; width:50%; top:1000px; } #imagethree{ position: absolute; width:50%; left: 50%; top:1200px; } 

 <div id="image"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/600px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg" id="imageone"/> <img src="https://images.unsplash.com/photo-1507667522877-ad03f0c7b0e0?ixlib=rb-0.3.5&s=abfa7882ea0fca1fab6a6c2a7d76c0c9&auto=format&fit=crop&w=933&q=80" id="imagetwo"/> <img src="https://images.unsplash.com/photo-1497445462247-4330a224fdb1?ixlib=rb-0.3.5&s=246fd0d0ce33fcb5901efece89d14c49&auto=format&fit=crop&w=934&q=80" id="imagethree"/> <img src="https://images.unsplash.com/photo-1518063319789-7217e6706b04?ixlib=rb-0.3.5&s=9cb9c66926a12de24fbc525f0504bf2d&auto=format&fit=crop&w=934&q=80" id="imagefour"/> <div> 

在这里，它托管在codepen 链接上

这是视觉描述： 链接注意：没有填充，边距和边界线（当然！）

Answer 1

您可以尝试以下方法：

#image {
  font-size: 0; /* remove space after inline element */
}

#image img {
  display: inline-block;
  vertical-align: top; /* remove extra pixels under inline element */
  width: 50%;
}

 div { font-size: 0; /* remove space after inline element */ } img { display: inline-block; vertical-align: top; /* remove extra pixels under inline element */ width: 50%; } 

 <div id="image"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/600px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg" id="imageone"/> <img src="https://images.unsplash.com/photo-1507667522877-ad03f0c7b0e0?ixlib=rb-0.3.5&s=abfa7882ea0fca1fab6a6c2a7d76c0c9&auto=format&fit=crop&w=933&q=80" id="imagetwo"/> <img src="https://images.unsplash.com/photo-1497445462247-4330a224fdb1?ixlib=rb-0.3.5&s=246fd0d0ce33fcb5901efece89d14c49&auto=format&fit=crop&w=934&q=80" id="imagethree"/> <img src="https://images.unsplash.com/photo-1518063319789-7217e6706b04?ixlib=rb-0.3.5&s=9cb9c66926a12de24fbc525f0504bf2d&auto=format&fit=crop&w=934&q=80" id="imagefour"/> <div> 

Answer 2

删除您的代码并使用以下代码

#image{
  line-height: 1px;
}
#image img{
float: left;
width: 50%;
height: 50vh;
}

Answer 3

我将使用CSS Grid进行整理。

 #image { display: grid; grid-gap: 10px; } img { /*Let image take full width of the division of space*/ max-width: 100%; height: auto; } /*For screen larger than mobile*/ @media screen and (min-width: 520px) { #image { grid-template-columns: 1fr 1fr; } } 

 <div id="image"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/600px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg" id="imageone"/> <img src="https://images.unsplash.com/photo-1507667522877-ad03f0c7b0e0?ixlib=rb-0.3.5&s=abfa7882ea0fca1fab6a6c2a7d76c0c9&auto=format&fit=crop&w=933&q=80" id="imagetwo"/> <img src="https://images.unsplash.com/photo-1497445462247-4330a224fdb1?ixlib=rb-0.3.5&s=246fd0d0ce33fcb5901efece89d14c49&auto=format&fit=crop&w=934&q=80" id="imagethree"/> <img src="https://images.unsplash.com/photo-1518063319789-7217e6706b04?ixlib=rb-0.3.5&s=9cb9c66926a12de24fbc525f0504bf2d&auto=format&fit=crop&w=934&q=80" id="imagefour"/> <div>