gpt4 book ai didi

html - 行内 block DIV 元素之间的额外空间

转载 作者:太空宇宙 更新时间:2023-11-04 13:36:17 24 4
gpt4 key购买 nike

<分区>

我正在使用 CSS 列布局模块创建流畅的布局,当 2 个或更多元素位于列的同一“行”时,我看到了意想不到的结果。元素之间会出现 3 到 4 px 的间隙。我在 IE11、FireFox 24、Chrome 31 和 Safari 5.1.7 中进行了测试,它们都表现出相同的行为。

<div class="tile-container">
<div class="tile-large">1</div>
<div class="tile-wide">2</div>
<div class="tile-small">3</div>
<div class="tile-small">4</div>
<div class="tile-small">5</div>
<div class="tile-small">6</div>
<div class="tile-wide">7</div>
<div class="tile-large">8</div>
</div>

.tile-container {
-moz-column-width: 250px;
-webkit-column-width: 250px;
column-width: 250px;
column-fill: auto;
height: 502px;
background-color: gray;
}

.tile-large {
width: 250px;
height: 250px;
-webkit-column-break-inside: avoid;
break-inside: avoid;
display: inline-block;
background-color: green;
}

.tile-wide {
width: 250px;
height: 125px;
-webkit-column-break-inside: avoid;
break-inside: avoid;
display: inline-block;
background-color: blue;
}

.tile-small {
width: 125px;
height: 125px;
-webkit-column-break-inside: avoid;
break-inside: avoid;
display: inline-block;
background-color: red;
}

我不想开始使用负边距来缩小差距,因为我想引入拖放行为。向左浮动将消除间隙,但这会引入另一组问题。奇怪的是,当我使用 jQueryUI sortable 时,在 drop 事件和 jQueryUI 排列元素之后,差距不再存在。

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