gpt4 book ai didi

css - 纯 css 砌体 View : remove all (vertical) white space between variable height divs

转载 作者:行者123 更新时间:2023-12-04 20:35:08 24 4
gpt4 key购买 nike

<分区>

我有宽度相等但高度可变的 div,但是下面代码中的 div 之间有垂直空白(特别是 div49),如何让 div 在页面顶部对齐并填充在垂直和水平方向彼此下方(基本上删除 div 之间尽可能多的空白区域)?

是否正在寻找纯 CSS 解决方案(如果存在)?

.boxx {
border-radius: 5px;
border: 5px solid #AACAF7;
padding: 10px;
background-color: #eee;
width: 200px;
height: 60px;
position: relative;
overflow: hidden;
display: inline-block;
/* float: left;*/
}
.boxx2 {
border-radius: 5px;
border: 5px solid #AACAF7;
padding: 10px;
background-color: #eee;
width: 200px;
height: 120px;
position: relative;
overflow: hidden;
display: inline-block;
/* float: left;*/
}
<div id="sortableDiv">
<div class="boxx2" data-sort='5.1'>div5.1</div>
<div class="boxx" data-sort='49'>div49</div>
<div class="boxx2" data-sort='1.1'>div1.1</div>
<div class="boxx" data-sort='2'>div2</div>
<div class="boxx" data-sort='1'>div1</div>
<div class="boxx" data-sort='3'>div3</div>
<div class="boxx" data-sort='99'>div99</div>
<div class="boxx" data-sort='88'>div88</div>
<div class="boxx" data-sort='77'>div77</div>

使用之前/之后的图片更容易解释: css whitespace

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