用柔性盒将图像排成一行
用柔性盒将图像排成一行
提问于 2017-01-24 20:24:46
我想把的一堆图片放在一起(连续4张)，把第5张放在下一行.
图像宽度应为行的1/4。
我在用折叠式盒子来解决这个问题，但没有线索.
<h2>Students</h2>
<div class="content">
<img class="student" src="http://placehold.it/400x400">
<img class="student" src="http://placehold.it/400x400">
<img class="student" src="http://placehold.it/400x400">
<img class="student" src="http://placehold.it/400x400">
<img class="student" src="http://placehold.it/400x400">
<img class="student" src="http://placehold.it/400x400">
<img class="student" src="http://placehold.it/400x400">
</div>
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-01-24 20:28:09
.content {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.content > div {
width: 25%;
padding: 0 10px 10px 0;
box-sizing: border-box;
}
.content > div img {
width: 100%;
}<h2>Students</h2>
<div class="content">
<div><img class="student" src="http://placehold.it/400x400"></div>
<div><img class="student" src="http://placehold.it/400x400"></div>
<div><img class="student" src="http://placehold.it/400x400"></div>
<div><img class="student" src="http://placehold.it/400x400"></div>
<div><img class="student" src="http://placehold.it/400x400"></div>
</div>
这就是你想要的？
Stack Overflow用户
发布于 2017-01-24 20:43:24
您可以设置一个静态width，最终设置一个margin，所有这些都不应该超过25%，如果您想要4行，33.33%用于一行3，以此类推。
.content {
display:flex;
flex-wrap:wrap;
align-items:flex-start; /* else image aare stretching in Chrome */
}
.student {
margin:1vw 1%;
width:23%;/* 23% + 1% margin-left + 1% margin-right = 25% */
}<h2>Students</h2>
<div class="content">
<img class="student" src="http://placehold.it/400x400">
<img class="student" src="http://placehold.it/400x400">
<img class="student" src="http://placehold.it/400x400">
<img class="student" src="http://placehold.it/400x400">
<img class="student" src="http://placehold.it/400x400">
<img class="student" src="http://placehold.it/400x400">
<img class="student" src="http://placehold.it/400x400">
</div>
编辑很明显，如果 align-items:flex-start; 没有设置，则铬有问题，
..。我认为float是这种简单布局的跨浏览器：
.content {
overflow:hidden;
}
.student {
float:left;
margin: 1%;
width:23%;/* 23% + 1% margin-left + 1% margin-right = 25% */
}<h2>Students</h2>
<div class="content">
<img class="student" src="http://placehold.it/400x400">
<img class="student" src="http://placehold.it/400x400">
<img class="student" src="http://placehold.it/400x400">
<img class="student" src="http://placehold.it/400x400">
<img class="student" src="http://placehold.it/400x400">
<img class="student" src="http://placehold.it/400x400">
<img class="student" src="http://placehold.it/400x400">
</div>
我只想说:)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41838344
复制相关文章
相似问题
腾讯云开发者
