Я хочу сделать четыре картинки рядом, но безуспешно. Два сверху два снизу. Я хочу убедиться, что они остаются неизменными со всеми размерами браузера, кроме мобильного. Вот моя попытка до сих пор

#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>
Ссылка

Вот визуальное описание: ссылка Примечание: без отступов, полей и границ (конечно ! )

1
user9269971 27 Фев 2018 в 12:15

3 ответа

Лучший ответ

Вы можете попробовать это:

#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>
6
3rdthemagical 27 Фев 2018 в 09:31

Я бы использовал 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>
0
omukiguy 27 Фев 2018 в 09:33

Удалите свой код и используйте приведенный ниже код

#image{
  line-height: 1px;
}
#image img{
float: left;
width: 50%;
height: 50vh;
}
0
PPL 27 Фев 2018 в 09:28