Question

我想在我的内容div的每一行中有4张图片插入前四个图像后，它们将显示在第一行中。如果我添加更多图像，将转到下一行，直到它达到四个数字，然后它将转到下一行，依此类推。我希望它的设计方式是每当我尝试使浏览器窗口变小时，图像就会相互低于一致，以便在每一行中显示平衡数量的图片。

<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 div提供了一些样式。但是我没能得到理想的结果。

Answer 1

您可以尝试使用内嵌布局：

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

JSFiddle

Answer 2

#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 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 head put

中

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

这是我的小提琴https://jsfiddle.net/DIRTY_SMITH/3x9ygrf7/

在div中的每一行中有4个图像

4 个答案: