並排對齊圖像（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>