很难想出一个好的标题——无论如何,如果可以的话,改变一下。
传统上,margin
on an element 可用于相对于其先前元素在页面周围移动元素。所以,如果我有一个 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 会使其他元素漂浮在空间中,无法向上移动。
编辑以明确动态问题
感谢到目前为止的评论。问题不在于使用布局,我了解如何设置网格和行,定义大小、空间、跨度等,问题在于动态内容。
假设我有一个非常简单的产品页面:
https://jsfiddle.net/jhartnoll/xvhycg0k/42/
不管网格间距、行/列大小等如何,这个概念很简单,就是我在产品标题上方添加了一个“ Markdown 10%”的初始元素。
自然地,产品页面将使用模板,因此 HTML 和 CSS 应该是固定的和足够灵活的,以使元素可以丢失或出现。
并非所有产品页面都会显示 10% 的折扣优惠,因此在这些页面上,我希望产品标题向上移动到顶部元素位置。
据我所知,这是网格无法实现的。
同样,如果有 div
其中包含产品描述,在其下方是一些产品交叉促销或其他内容,描述可能是可变长度的,所以使用 div
作为我原始问题中的一个列示例,内容将自动扩展描述网格并将交叉促销内容移至页面下方。再一次,这不能用网格来实现吗?
所以,我只是在使用一个网格来定义列,每页只定义一行,这样内容就可以像原来的 div
一样堆叠在列中。作为列示例,但后来我遇到了这个 margin-top
问题,在网格内是 margin-top
是相对于网格顶部的,而不是相对于上面的元素。
所以我找不到创建动态网站的方法,使用模板设计允许使用 Grid 的条件元素和可变元素尺寸,而不使用 Javascript 来操作页面加载。
在我看来,row-shift
应该有一个选项。属性以允许元素在内容太大时跳下一行,或者在没有任何阻碍的情况下跳上...或类似的东西!
最佳答案
嘿试试下面的代码,我想它会帮助你的要求!
#column{display:grid;grid-row-gap: 10px;width:4em;height:auto;border:1px solid grey;}
#one{background:red;width:2em ; height:2em}
#two{background:blue;width:2em ; height:2em}
<div>
<div id="column">
<div id="one">
</div>
<div id="two">
</div>
</div>
</div>
关于html - CSS Grid Column中的元素,上边距表现为位置top,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50945572/