Имея 4 изображения в каждой строке в div

Question

Я хочу иметь 4 изображения в каждой строке моего содержания div
После того, как я вставляю первые четыре изображения, они будут показаны в первой строке. Если я добавлю больше изображений, он перейдет к следующей строке, пока не достигнет четырех чисел, затем перейдет к следующей строке и так далее. Я хочу, чтобы это было стилизовано таким образом, что всякий раз, когда я пытаюсь сделать окно браузера меньше, изображения будут подходить друг к другу, чтобы отображать сбалансированное количество изображений в каждой строке.

<div id="content"> 
    <img src="pic1.jpg" alt="pic1"> 
    <img src="pic1.jpg" alt="pic1"> 
    <img src="pic1.jpg" alt="pic1"> 
    <img src="pic1.jpg" alt="pic1"> 
</div> 

Я попытался выше код и дал некоторые стили к content дел. Но мне не удалось получить желаемый результат.

Answer 1

#content img { width:25%; float:left; } 

Вы, вероятно, хотите использовать видовые тег (в вашем HTML голове)

<meta name="viewport" content="width=device-width, initial-scale=1"> 

Так что вы можете использовать

@media screen and (max-width: 768px) { } 

и изменить ее, например

#content img { width:50%; float:left; } 

когда изображения получают с размером, который больше не практично (слишком мал) для просмотра.

Answer 2

Вы можете попробовать с инлайн макетом:

img {width: 25%;} 
div {word-spacing: -100%;} 

JSFiddle

Answer 3

В качестве примера с Flexbox:

jsfiddle

<div id="content"> 
    <img src="img/img1.jpg" alt="pic1"> 
    <img src="img/img1.jpg" alt="pic1"> 
    <img src="img/img1.jpg" alt="pic1"> 
    <img src="img/img1.jpg" alt="pic1"> 
</div> 

CSS:

#content { 
    display: flex; 
    flex-wrap: wrap; 
} 

#content img { 
    width: 100px; 
    flex-basis: 25%; 
} 

Попробуйте добавить другие изображения в #content в скрипку, чтобы увидеть, как она оборачивает

Answer 4

HTML пример

<div id="container"> 
<div id="image1"><img src=""/></div> 
<div id="image2"><img src=""/></div> 
<div id="image3"><img src=""/></div> 
<div id="image4"><img src=""/></div> 
<div id="image5"><img src=""/></div> 
<div id="image6"><img src=""/></div> 
<div id="image7"><img src=""/></div> 
<div id="image8"><img src=""/></div> 
</div> 

пример CSS

#container{width: 400px;} 

#image1 {width: 100px; height: 100px; background-color: black; float: left;} 
#image2 {width: 100px; height: 100px; background-color: blue; float: left;} 
#image3 {width: 100px; height: 100px; background-color: black; float: left;} 
#image4 {width: 100px; height: 100px; background-color: blue; float: left;} 
#image5 {width: 100px; height: 100px; background-color: blue; float: left;} 
#image6 {width: 100px; height: 100px; background-color: black; float: left;} 
#image7 {width: 100px; height: 100px; background-color: blue; float: left;} 
#image8 {width: 100px; height: 100px; background-color: black; float: left;} 

@media only screen and (max-width: 399px){ 
    #container{width: 100%;} 
} 

Я поставил медиа-запрос на 399px так что после 399px вы Виль увидеть коробки падение вниз.

также в вашем HTML голове поместить

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 

вот моя скрипку https://jsfiddle.net/DIRTY_SMITH/3x9ygrf7/