Советы и рекомендации по отображению нескольких картинок рядом друг с другом - PullRequest
Новая
       6

Советы и рекомендации по отображению нескольких картинок рядом друг с другом

0 голосов
/ 22 января 2019

Я хотел бы отображать фиктивные изображения в строке рядом друг с другом, как показано ниже:

enter image description here

Поскольку я не очень хорош сCSS Мне было интересно, как это сделать правильно?Все изображения, которые у меня есть, статически обслужены, ни одно из этих изображений не должно быть динамическим, или скользящим, или чем-то еще, просто реагируя на отображение и масштабирование

Спасибо за ваш ввод

Пробовал с положениемабсолютный и относительный, но был странно расположен повсюду.Я использую Bootstrap 4 в этом проекте

1 Ответ

0 голосов
/ 22 января 2019

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

body {
  background: #20262E;
}

div {
  margin: 10px;
  padding: 10px;
  background: #ffffff;
}

img {
  width: 24%;
  border-radius: 50%;
}
<div>
  <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar 1">
  <img src="https://www.w3schools.com/howto/img_avatar2.png" alt="Avatar 2">
  <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar 3">
  <img src="https://www.w3schools.com/howto/img_avatar2.png" alt="Avatar 4">
</div>

А если вы хотите, чтобы зеленая галочка с изображением, сделайте следующее: 

body {
  background: #20262E;
}

#image-gallery {
  margin: 10px;
  padding: 10px;
  background: #ffffff;
}

.image-box{
  display: inline-block;
  position: relative;
  width: 24%;
}

img {
  width: 100%;
  border-radius: 50%;
}

.green-tick {
  position: absolute;
  bottom: 10%;
  right: 10%;
  border-radius: 50%;
  color: #ffffff;
  background: #00ff00;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" type="text/css" />

<div id="image-gallery">
  <div class="image-box">
    <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar 1">
    <i class="fa fa-check green-tick"></i>
  </div>
  <div class="image-box">
    <img src="https://www.w3schools.com/howto/img_avatar2.png" alt="Avatar 2">
    <i class="fa fa-check green-tick"></i>
  </div>
  <div class="image-box">
    <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar 3">
    <i class="fa fa-check green-tick"></i>
  </div>
  <div class="image-box">
    <img src="https://www.w3schools.com/howto/img_avatar2.png" alt="Avatar 4">
    <i class="fa fa-check green-tick"></i>
  </div>
</div>
...