按行排列图像
按行排列图像
提问于 2018-04-07 14:49:30
如何在行中排列图像(具有不同高度)，使连续行中的图像之间没有任何间距？假设图像1在行1，图像k在行2，所以即使图像1不是行1中最高的元素，我也不希望1和k之间有空格？
只有使用CSS才需要实现。
如何做到这一点？
像这样的1、2、3和4是图像
一个预期的示例是
回答 2
Stack Overflow用户
发布于 2018-04-07 15:15:54
我想这就是你要找的。
来自W3Schools的示例
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
}
.header {
text-align: center;
padding: 32px;
}
.row {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
}
/* Create four equal columns that sits next to each other */
.column {
flex: 25%;
max-width: 25%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
}
/* Responsive layout - makes a two column-layout instead of four columns */
@media (max-width: 800px) {
.column {
flex: 50%;
max-width: 50%;
}
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
.column {
flex: 100%;
max-width: 100%;
}
}<!DOCTYPE html>
<html>
<body>
<!-- Header -->
<div class="header">
<h1>Responsive Image Grid</h1>
<p>Resize the browser window to see the responsive effect.</p>
</div>
<!-- Photo Grid -->
<div class="row">
<div class="column">
<img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
<img src="https://www.w3schools.com/w3images/rocks.jpg" style="width:100%">
<img src="https://www.w3schools.com/w3images/falls2.jpg" style="width:100%">
<img src="https://www.w3schools.com/w3images/paris.jpg" style="width:100%">
<img src="https://www.w3schools.com/w3images/nature.jpg" style="width:100%">
<img src="https://www.w3schools.com/w3images/mist.jpg" style="width:100%">
<img src="https://www.w3schools.com/w3images/paris.jpg" style="width:100%">
</div>
<div class="column">
<img src="https://www.w3schools.com/w3images/underwater.jpg" style="width:100%">
<img src="https://www.w3schools.com/w3images/ocean.jpg" style="width:100%">
<img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
<img src="https://www.w3schools.com/w3images/mountainskies.jpg" style="width:100%">
<img src="https://www.w3schools.com/w3images/rocks.jpg" style="width:100%">
<img src="https://www.w3schools.com/w3images/underwater.jpg" style="width:100%">
</div>
<div class="column">
<img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
<img src="https://www.w3schools.com/w3images/rocks.jpg" style="width:100%">
<img src="https://www.w3schools.com/w3images/falls2.jpg" style="width:100%">
<img src="https://www.w3schools.com/w3images/paris.jpg" style="width:100%">
<img src="https://www.w3schools.com/w3images/nature.jpg" style="width:100%">
<img src="https://www.w3schools.com/w3images/mist.jpg" style="width:100%">
<img src="https://www.w3schools.com/w3images/paris.jpg" style="width:100%">
</div>
<div class="column">
<img src="https://www.w3schools.com/w3images/underwater.jpg" style="width:100%">
<img src="https://www.w3schools.com/w3images/ocean.jpg" style="width:100%">
<img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
<img src="https://www.w3schools.com/w3images/mountainskies.jpg" style="width:100%">
<img src="https://www.w3schools.com/w3images/rocks.jpg" style="width:100%">
<img src="https://www.w3schools.com/w3images/underwater.jpg" style="width:100%">
</div>
</div>
</body>
</html>
Stack Overflow用户
发布于 2018-04-07 15:22:07
一个解决方案也可以使用引导程序v4风格的.card-columns和.card来实现类似的结果：Bootstrap Docs
.card-columns {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-gap: 1.25rem;
-moz-column-gap: 1.25rem;
column-gap: 1.25rem;
}
.card {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
min-width: 0;
display: inline-block;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1px solid rgba(0,0,0,.125);
border-radius: 2px;
margin-bottom: 15px;
width: 100%;
}
.card img {
width: 100%; height: auto;
margin: 0;
}<div class="card-columns">
<div class="card">
<div class="img-wrapper">
<img src="https://fakeimg.pl/250x100/">
</div>
</div>
<div class="card">
<div class="img-wrapper">
<img src="https://fakeimg.pl/250x600/">
</div>
</div>
<div class="card">
<div class="img-wrapper">
<img src="https://fakeimg.pl/250x200/">
</div>
</div>
<div class="card">
<div class="img-wrapper">
<img src="https://fakeimg.pl/250x100/">
</div>
</div>
<div class="card">
<div class="img-wrapper">
<img src="https://fakeimg.pl/250x600/">
</div>
</div>
<div class="card">
<div class="img-wrapper">
<img src="https://fakeimg.pl/250x200/">
</div>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49704731
复制相关文章
相似问题
腾讯云开发者
