gpt4 book ai didi

html - 如何删除 CSS 网格第二列中的间隙?

转载 作者:行者123 更新时间:2023-11-27 23:01:07 25 4
gpt4 key购买 nike

我在简单的 CSS 专栏中遇到了困难。这是它的样子:

enter image description here

HTML:

<div class="catalogue-container">

<div class="catalogue-item">
<img src="blabla.jpg" />
</div>

<div class="catalogue-item">
<img src="blabla2.jpg" />
</div>

<div class="catalogue-item">
<img src="blabla3.jpg" />
</div>

<div class="catalogue-item">
<img src="blabl4.jpg" />
</div>

</div>

CSS:

.catalogue-container {
-webkit-column-count: 2;
-webkit-column-gap: 7px;
column-count: 2;
column-gap: 7px;
width: 100%;
margin: 0 auto;
}

.catalogue-item {
margin-bottom: 7px;
padding: 0;
}

我的引用:https://codepen.io/gsarig/pen/iqhfl

我想消除间隙并将元素从第二列移到顶部。

我是不是漏掉了什么?

最佳答案

问题可能是使用column时div换行引起的,可以尝试在.catalogue-item中加入display: inline-block来避免。

在有或没有display: inline-block的情况下尝试以下操作:

.catalogue-container {
-webkit-column-count: 2;
-webkit-column-gap: 7px;
column-count: 2;
column-gap: 7px;
width: 100%;
margin: 0 auto;
}

.catalogue-item {
margin-bottom: 7px;
padding: 0;
border:1px solid black;
display: inline-block;
width: 100%;
}
<div class="catalogue-container">

<div class="catalogue-item">
<img src="blabla.jpg" style="height: 300px; display: block;"/>
</div>

<div class="catalogue-item">
<img src="blabla2.jpg" style="height: 190px; display: block;"/>
</div>

<div class="catalogue-item">
<img src="blabla3.jpg" style="height: 200px; display: block;"/>
</div>

<div class="catalogue-item">
<img src="blabl4.jpg" style="height: 250px; display: block;"/>
</div>

</div>

关于html - 如何删除 CSS 网格第二列中的间隙?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52396605/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com