CSS Grid Column中的元素,上边距表现为位置top

Posted

技术标签:

【中文标题】CSS Grid Column中的元素,上边距表现为位置top【英文标题】:Elements in CSS Grid Column, top margin behaves as position top 【发布时间】:2018-11-29 10:20:25 【问题描述】:

很难想出一个好的标题 - 无论如何,如果可以的话,改变。

传统上,元素上的margin 可用于相对于其先前元素在页面周围移动元素。因此,如果我在页面上有一个 div 作为列,我可以通过设置它们的 top-margin CSS 属性在其中垂直移动元素。

这在根据给定条件可能不存在某些元素的动态页面中很方便,例如,这里有一个非常简单的示例:

https://jsfiddle.net/jhartnoll/4s6pcLu0/1/

我简单地定义了一个带有div 元素的列,定位了另外两个div 元素,并让其中一个与它的前任元素之间有2em 的垂直间隙。

如果您删除(或设置 Display:none)元素 #one,则元素 #two 将向上移动列并定位在距列顶部 2em 处,而不是距元素 #one 2em 处,后者不再存在.

但是,如果我尝试使用 CSS 网格做类似的事情,从而使 DOM 树更简单、更灵活,我就会遇到问题:

https://jsfiddle.net/jhartnoll/xvhycg0k/11/

在这种情况下,列是由 CSS 网格设置的,所以是伪列,但是当我将我的元素设置为 margin-top: 2em 时,边距是从网格列的顶部计算的,而不是相对于前任元素。

因此,如果元素 #one 不存在,#two 只会从顶部向下保持 2em,并在上方留下一个空隙......

这种行为使margin-top 无用,因为它与top 在相对定位的元素上完全可以互换。

这是 CSS Grid 的错误,还是我用错了,或者有没有办法解决这个问题?

CSS Grid 看起来很棒,但在涉及动态内容时,我遇到了几个类似的问题,如果元素具有潜在的可变高度,或者可能根本不存在,Grid 会使其他元素漂浮在空间中,无法移动起来。

编辑以明确动态问题

感谢到目前为止的 cmets。问题不在于使用布局,我了解如何设置网格和行,定义大小、空间、跨度等,问题在于动态内容。

假设我有一个非常简单的产品页面: https://jsfiddle.net/jhartnoll/xvhycg0k/42/

不管网格间距、行/列大小等,这个概念只是我在产品标题上方添加了一个“降价 10%”的初始元素。

自然,产品页面将使用模板,因此 html 和 CSS 应该是固定的和足够灵活的,以使元素可以丢失或出现。

并非所有产品页面都会显示 10% 折扣优惠,因此在这些页面上,我希望产品标题向上移动到顶部元素位置。

据我所知,这是网格无法实现的。

同样,如果有一个 div 包含产品描述,并且在其下方有一些产品交叉促销或其他内容,则描述可能具有可变长度,因此在我的原始问题中使用 div 作为列示例,内容将自动扩展描述网格并将交叉推广内容移至页面下方。再一次,这不能用网格来实现吗?

所以,我只是在使用一个网格来定义列,每页只定义一行,这样内容就可以像原来的 div 那样堆叠在列中作为列示例,但后来我遇到了这个 @987654341 @ 问题,在 Grid 中,margin-top 是相对于网格顶部的,而不是相对于上面的元素。

所以我找不到创建动态网站的方法,使用模板设计允许使用 Grid 的条件元素和可变元素尺寸,而不使用 javascript 来操作页面加载。

在我看来,row-shift 属性应该有一个选项,以允许元素在内容太大时跳下一行,或者在没有任何阻碍的情况下跳上...或者类似的东西!

【问题讨论】:

我不清楚您要做什么,但这听起来像是一个 masonry 问题,而不是一个实际的 grid 问题。 中不应该需要边距,因为这就是 CSS-Grid 的运作方式。 就我个人而言,这一切都是合乎逻辑的,对我来说很好......第一种情况是你有边距折叠行为,对于网格,你已经将两个元素定义为彼此之上[在同一个网格位置]然后你用边距移一个 @Paulie_D 它与砌体无关! 那么你并没有真正解释你想要做什么......尤其是在同一个网格单元中的 10em 行和(显然)重叠元素 jsfiddle.net/m25aokdn 【参考方案1】:

嘿试试下面的代码,我想它会帮助你的要求!

#columndisplay:grid;grid-row-gap: 10px;width:4em;height:auto;border:1px solid grey;
#onebackground:red;width:2em ; height:2em
#twobackground:blue;width:2em ; height:2em
<div>
<div id="column">
<div id="one">

</div>
<div id="two">

</div>
</div>
</div>

【讨论】:

这很接近,我不知道为什么会被否决,但如果同一行上存在多个元素,它将不起作用。 我不知道他们为什么对我投了反对票。无论如何,您想要连续多少个元素? 嗯,重点是它应该是灵活的。请参阅我添加的示例。

以上是关于CSS Grid Column中的元素,上边距表现为位置top的主要内容,如果未能解决你的问题,请参考以下文章

带有“display:inline-flex”的元素有一个奇怪的上边距

CSS 如果元素可见,则更改正文边距大小

知识归纳-网格布局-grid

Grid 网格布局

css内外边距用%表示时该怎么计算

css中margin-top和top有啥区别