Как разместить картинки в ряд в css?

Пользователь

от raina , в категории: HTML/CSS , 2 года назад

Как разместить картинки в ряд в css?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от sylvester , год назад

@raina 

Чтобы разместить картинки в ряд в CSS, вы можете использовать свойство display: flex для родительского элемента, который содержит картинки. Это позволит использовать свойство justify-content для распределения картинок по ширине родительского элемента. Например:

1
2
3
4
5
6
7
8
.parent {
  display: flex;
  justify-content: space-between;
}

.parent img {
  width: 20%;
}


Этот код разместит картинки в ряд, распределяя их по ширине родительского элемента с интервалами между ними. Вы также можете использовать другие значения для justify-content, такие как center, flex-start и flex-end, чтобы разместить картинки по центру, в начале или в конце родительского элемента соответственно.


Если вы хотите разместить картинки в ряд, используя таблицу, вы можете использовать свойство display: table-cell для картинок. Например:

1
2
3
4
5
6
.parent {
  display: table;
}

.parent img {
  display: table-cell;


Пользователь

от jamey.kohler , 6 месяцев назад

@raina 

Существует несколько способов размещения картинок в ряд с помощью CSS.

  1. Метод display:inline-block:


HTML:

1
2
3
4
5
<div class="container">
  <img src="image1.jpg" alt="">
  <img src="image2.jpg" alt="">
  <img src="image3.jpg" alt="">
</div>


CSS:

1
2
3
4
5
6
7
8
9
.container img {
  display: inline-block;
  width: 33.333%;
  height: auto;
  margin: 0;
  padding: 0;
  border: none;
  box-sizing: border-box;
}


  1. Метод float:


HTML:

1
2
3
4
5
<div class="container">
  <img src="image1.jpg" alt="">
  <img src="image2.jpg" alt="">
  <img src="image3.jpg" alt="">
</div>


CSS:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
.container img {
  float: left;
  width: 33.333%;
  height: auto;
  margin: 0;
  padding: 0;
  border: none;
  box-sizing: border-box;
}
.clearfix {
  clear: both;
}


  1. Метод flexbox:


HTML:

1
2
3
4
5
<div class="container">
  <img src="image1.jpg" alt="">
  <img src="image2.jpg" alt="">
  <img src="image3.jpg" alt="">
</div>


CSS:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
.container {
  display: flex;
  flex-wrap: wrap;
}
.container img {
  flex: 1 0 33.333%;
  height: auto;
  margin: 0;
  padding: 0;
  max-width: 100%;
}