У меня есть X количество изображений (все равно высота и ширина), и я хочу отображать их на веб-странице. Но я хочу, чтобы страница автоматически отображала максимальное количество изображений в строке (без изменения размера изображений) при изменении размера браузера и для отображения изображений на фиксированном расстоянии друг от друга.
Также изображения должны быть сгруппированы в центре страницы и отображаться один за другим.
например. Когда окно браузера достаточно велико, чтобы отображать 3 изображения в строке, они должны отображаться следующим образом.
3 изображения в строке, сгруппированные вместе на фиксированном расстоянии друг от друга, в центре страницы, один за другим.
И если браузер становится более широким, поэтому в строке могут отображаться 4 изображения, они должны отображаться так.
4 изображения в строке (без изменения размера изображений), сгруппированные на фиксированном расстоянии друг от друга, в центре страницы, один за другим.
До сих пор я написал следующий код:
HTML
<div class="outer-div">
<div class="inner-div">
<div class="image-div"><img src="images/1.png"></div>
<div class="image-div"><img src="images/2.png"></div>
<div class="image-div"><img src="images/3.png"></div>
<div class="image-div"><img src="images/4.png"></div>
<div class="image-div"><img src="images/5.png"></div>
</div>
</div>
CSS
img {
height: 200px;
width: 200px;
padding: 10px;
}
.image-div {
display: inline;
}
.outer-div {
text-align: center;
width: 100%;
}
.inner-div {
text-align: left;
display: inline;
}
Таким образом, изображения отображаются в строке с добавлением 10px внутри div (inner-div), который затем центрируется внутри внешнего div. И изображения выравниваются по тексту слева внутри-div.
Но проблема в том, что они отображаются следующим образом:
И как следует, когда браузер становится шире
Может кто-нибудь, пожалуйста, покажите мне, как отображать изображения, такие как первый набор изображений?
то есть. Максимальное количество изображений в строке (без изменения размера изображений), один за другим, сгруппированные в центре страницы, фиксированное расстояние (завернутое).
