[英]aligning image side by side position (css + html)
Im a looking to make four pic side by side yet unsuccessul. 我希望能够并排放置四个图片而未成功。 Two on top two on the bottom.
顶部两个,底部两个。 I want to make sure that they stay the same with all browser size except mobile.
我想确保它们与除移动设备以外的所有浏览器大小相同。 Here is my attempt so far
到目前为止,这是我的尝试
#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>
here is visual description : link Note: without the padding and margin and borderline (of course!) 这是视觉描述: 链接注意:没有填充,边距和边界线(当然!)
You can try this: 您可以尝试以下方法:
#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>
remove your code and use below code 删除您的代码并使用以下代码
#image{
line-height: 1px;
}
#image img{
float: left;
width: 50%;
height: 50vh;
}
I would use CSS Grid to sort that out. 我将使用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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.