我正在尝试使用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>
如您所见,如果您有两个元素,则会在第一列中对其进行调整。即使有四个元素,也会发生这种情况:第一列中有两个,第二列中有两个。
有没有办法让它们每列调整一次?
最佳答案
您将数字显示为内嵌块。将其显示为方块
.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列:首先填充行,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/51893686/