Как разместить картинки в ряд в css?
2 ответа
@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; |
@raina
Существует несколько способов размещения картинок в ряд с помощью CSS.
- Метод 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;
}
|
- Метод 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;
}
|
- Метод 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%;
}
|