我正在尝试使用 css3 列进行 pinterest 风格的布局。
这是我到目前为止的代码:
.column-container {
width: 100%;
column-count: 4;
column-gap: 5px;
padding: 0;
margin: 0;
}
.column-container > * {
width: 100%;
display: inline-block;
margin: 0;
padding: 0;
}
img {
max-width: 100%;
}
<div class="column-container">
<figure>
<img src="https://via.placeholder.com/500x150">
</figure>
<figure>
<img src="https://via.placeholder.com/500x250">
</figure>
<figure>
<img src="https://via.placeholder.com/500x350">
</figure>
<figure>
<img src="https://via.placeholder.com/500x450">
</figure>
<figure>
<img src="https://via.placeholder.com/500x150">
</figure>
<figure>
<img src="https://via.placeholder.com/500x250">
</figure>
<figure>
<img src="https://via.placeholder.com/500x350">
</figure>
<figure>
<img src="https://via.placeholder.com/500x450">
</figure>
<figure>
<img src="https://via.placeholder.com/500x150">
</figure>
</div>
到目前为止它可以工作,但是当 <figure>
很少时就会出现问题元素:
.column-container {
width: 100%;
column-count: 4;
column-gap: 5px;
padding: 0;
margin: 0;
}
.column-container > * {
width: 100%;
display: inline-block;
margin: 0;
padding: 0;
}
img {
max-width: 100%;
}
<div class="column-container">
<figure>
<img src="https://via.placeholder.com/500x150">
</figure>
<figure>
<img src="https://via.placeholder.com/500x250">
</figure>
</div>
如您所见,如果您有两个元素,它们会在第一列中进行调整。即使有四个元素也会发生这种情况:两个位于第一列,两个位于第二列。
有没有办法让它们每列调整一个?
最佳答案
您将图形显示为内联 block 。显示它们 block 而不是
.column-container > * {
width: 100%;
display: block;
margin: 0;
padding: 0;
}
.column-container {
width: 100%;
column-count: 4;
column-gap: 5px;
padding: 0;
margin: 0;
}
.column-container > * {
width: 100%;
display: block;
margin: 0;
padding: 0;
}
img {
max-width: 100%;
}
<div class="column-container">
<figure>
<img src="https://via.placeholder.com/500x150">
</figure>
<figure>
<img src="https://via.placeholder.com/500x250">
</figure>
</div>
关于html - CSS 列 : fill row first,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51893686/