个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
与 the Grid spec ，我了解如何对齐网格容器的子元素，但我想对齐子元素内的元素，就好像它们是网格项，而不是它们的容器。
本质上，我想要这样的东西:
在每一行中，单元格与其相邻单元格的高度相等。但是，每一行彼此独立。第一行的 header 有 2 行高，但是第二行的 header 有 3 行高。
每个元素中的内容是未知的，元素的数量也是未知的。因此对齐必须能够动态应用，而不是硬编码任何特定单元格的高度。
如果我理解正确的话，网格项中的元素本身并不是网格项。是否可以像它们一样对齐它们？
display: contents 开始被浏览器支持，我不认为combining it with grid-template-areas会起作用，因为在这种情况下，网格项的数量是动态的。
main {
display: grid;
grid-template-columns: 200px 200px 200px;
grid-gap: 20px 20px;
}
header { background-color: lightblue }
.content { background-color: lightgreen }
footer { background-color: yellow }<html>
<body>
<main>
<article>
<header>head</header>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a mi diam. Sed pulvinar ex et consectetur venenatis. Duis ligula odio, lobortis a pretium vel, auctor a ante. Nullam nec sem ante. Ut ut interdum metus. </div>
<footer>foot</footer>
</article>
<article>
<header>head head head head head head head head head head </header>
<div class="content">Pellentesque sed nisl vel velit porta mattis. Sed luctus euismod mi, in viverra mi lacinia in. Donec euismod magna metus, vel lacinia sem dignissim non.</div>
<footer>foot</footer>
</article>
<article>
<header>head</header>
<div class="content">Nulla pretium id enim quis rutrum. Donec lacinia mauris vel risus volutpat facilisis.</div>
<footer>foot</footer>
</article>
<article>
<header>head</header>
<div class="content">Pellentesque ut scelerisque nisl, ut cursus velit. </div>
<footer>foot</footer>
</article>
<article>
<header>head</header>
<div class="content">lorum ipsum.</div>
<footer>foot</footer>
</article>
<article>
<header>headhead head head head head head head head head head head head head head head </header>
<div class="content">Donec porttitor massa purus. Pellentesque hendrerit placerat risus vitae hendrerit. Fusce vitae elit dictum, pharetra lacus sodales, volutpat enim.</div>
<footer>foot</footer>
</article>
</main>
</body>
</html>最佳答案
除非您可以使用 display: subgrid 或 display: contents(更多信息见下文)，否则仅使用 CSS 实现此行为的唯一方法是将所有子级单个网格容器中的各种网格项。换句话说，让他们都成为 sibling 。
问题是一个容器中的元素不知道另一个容器中的表亲在做什么。他们没有直接联系，这使他们无法一起工作。另一方面， sibling 一起工作没有问题。
请注意，不建议出于 CSS 的目的“扁平化”HTML 文档，因为它会破坏语义和可访问性。
更多信息:
关于css - 网格项的等高子项，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48613691/
24
4
0
我正在寻找一种方法来创建根据价格选择我的产品的过滤器(选择下拉菜单)。 我知道这样的查询是完全可能的: SELECT * FROM products ORDER BY price ASC SELECT
函数参数中或显示尺寸时(高度，宽度)的顺序是否有约定？ 最佳答案 我不知道大量的语言，但我使用过的语言(宽度，高度)。它更适合沿着 (x, y) 坐标线。 关于language-agnostic -
在我的表单中，我让用户输入房间的长度高度和宽度以获得 m2、m3 和瓦特的计算值。但是用户也应该能够直接输入 height 和 m2 来获取值。我尝试了很多语法，但 if else 不能正常工作。我知
我在 Elasticsearch 中创建了一个索引，看起来像 {"amazingdocs":{"aliases":{},"mappings":{"properties":{"Adj Close":{"
我有以下功能，我需要清除数据库中的所有图片列并移动到文件系统。当我一次性完成这一切时，内存太多并且会崩溃。我切换到递归函数并执行 20 次写入和批量操作。 我需要为大约 6 个表执行此操作。我的 Re
我正在编写一个函数来计算 PI 的值，并将其作为 double 值返回。到目前为止，一切都很好。但是一旦函数到达小数点后14位，它就不能再保存了。我假设这是因为 double 有限。我应该怎么做才能继
2020年是中国CDN行业从98年诞生到今天快速发展的第二十四年，相关数据显示，全国感知网速持续上扬，达到了3.29兆/秒，标志着在宽带中国的政策指导下，中国的网速水平正在大步赶上世界发达国家的水平
在 aerospike 集合中，我们有四个 bin userId、adId、timestamp、eventype，主键是 userId:timestamp。在 userId 上创建二级索引以获取特定用
$('#container').highcharts('Map', { title : { text : 'Highmaps basic demo'
有没有办法显示自定义宽度/高度的YouTube视频？ 最佳答案 在YouTube网站上的this link中: You can resize the player by editing the obj
我使用 Highcharts ，我想在 Highcharts 状态下悬停时制作动态不同的颜色。 正如你可以看到不同的颜色，这就是我做的 var usMapChart , data = [] ; va
在所有节点上运行 tpstats 后。我看到很多节点都有大量的 ALL TIME BLOCKED NTR。我们有一个 4 节点集群，NTR ALL TIME BLOCKED 的值为: 节点 1:239
我发现 APC 上存在大量碎片 (>80%)，但实际上性能似乎相当不错。我有 read another post这建议在 wordpress/w3tc 中禁用对象缓存，但我想知道减少碎片是否比首先缓存
对于我的脚本类(class)，我们必须制作更高/更低的游戏。到目前为止，这是我的代码: import random seedVal = int(input("What seed should be u
我发现 APC 上存在大量碎片 (>80%)，但实际上性能似乎相当不错。我有 read another post这建议在 wordpress/w3tc 中禁用对象缓存，但我想知道减少碎片是否比首先缓存
对于我的脚本类(class)，我们必须制作更高/更低的游戏。到目前为止，这是我的代码: import random seedVal = int(input("What seed should be u
我已经 seen >2 字节的 unicode 代码点，如 U+10000 可以成对编写，如 \uD800\uDC00。它们似乎以半字节 d 开头，但我只注意到了这一点。 这个 split Actio
有人可以帮我理解为什么我的饼图百分比计算不正确吗？看截图: 根据我的计算，如 RHS 上所示，支出百分比应为 24.73%。传递给 Highcharts 的值如下:- 花费:204827099.36-
我阅读了有关该问题的所有答案，但我还没有找到任何解决方案。 我有一个应用程序，由我的 api 服务器提供。 Wildfly 8.1 和 Mysql 5.6。当查看时间到来时(Wildfly 服务器连接
我正在用选定的项目创建圆形导航。当用户单击任何项目时，它将移动到定义的特定点。一切都很好，除了当你继续点击项目时，当动画表现不同并且项目在 360 度圆中移动并且它被重置直到你重复场景时，我希望它
我是一名优秀的程序员,十分优秀！