css-grid 相关问题

我有这个 HTML： LOGOLOGO标题一些内容由一些文字组成我有这个 HTML： <div class="cards"> <div> <h2><aside>LOGO<br>LOGO</aside>Title</h2> <p>Some content made from some words</p> </div> <div> <h2>Title</h2> <p>Some content<br>Some more<br>Even more</p> </div> </div> 我把它排列成网格： .cards { display: grid; grid-template-columns: repeat(2,15em); padding: 0.5em; gap: 0.5em; } .cards > div { border: 1px solid blue; } h2 { margin: 0; border-bottom: 1px solid green; } aside { float:right; border: 1px solid red; } p { margin: 0; background-color: yellow; } 当您尝试此操作时，您会看到：旁边的 LOGO 延伸到 p 元素并取代其内容。太好了，我想要这个第二张卡的p元素较高，决定了网格行的高度。太好了，我想要这个第一张卡片的p元素没有到达卡片的底部。这很正常，但我想改变它。如何让较小的p填满标题下的房间？ Flexbox 不是一个选项，因为 Flex 项目会创建块格式化上下文，导致 h2 高度增加。我不想这样！我可以使用 JavaScript 来实现这一点。但是当纯 CSS 就可以的时候，你不应该使用 JavaScript。但确实如此吗？我找不到解决办法。好吧，我不确定这是否是您想要的，但让我们尝试一下。所以我想为什么你不能使用简单的 height:100% 来表示 p 元素？但是后来我明白高度开始超出div，那是因为当你将高度设置为100％时，它是根据其主容器的高度计算的，不包括填充，并且你在.card上得到了0.5em填充因此，我尝试通过更改高度的百分比来适应它，当我将其设置为 76% 之类的值时，效果非常好。但？但如果内容改变了怎么办？现在已经不好用了。这个问题的解决方案是 calc 函数。它可以帮助从 100% 高度减去填充。你可以尝试这样的事情： height: calc(100% - 1.75em) 它几乎填充了 div 的 100%，并且当内容改变高度时它可以工作。最终的CSS： .cards { display: grid; grid-template-columns: repeat(2,15em); padding: 0.5em; gap: 0.5em; } .cards > div { border: 1px solid blue; } h2 { margin: 0; border-bottom: 1px solid green; } aside { float:right; border: 1px solid red; } p { margin: 0; background-color: yellow; height: calc(100% - 1.75em) }

css css-grid

回答 1 投票 0

CSS 网格 - 自动调整行高，根据内容调整大小

我有两个网格嵌套在一个网格中。不幸的是，右侧嵌套网格 .grid-3 设置了行的高度，以便左右网格的高度相同，额外的空间是共享的...

css css-grid

回答 4 投票 0

CSS Grid、FlexBox - 如何防止容器重叠？

我有一个可以绘制卡片并显示文本的网页。文本和图像重叠。我不知道如何使它们不与 FlexBox、网格 CSS 重叠。 var 对象； $(文档).ready(函数() ...

html jquery css flexbox css-grid

回答 1 投票 0

一键展开整列卡片

我使用循环为此选项卡创建了卡片，数据来自数据库。当我单击“显示更多”按钮时，整个可见列都会随之展开。它不显示内容...