如何在网格中正确对齐开放时间？

Posted 2021-04-15

我做了一个Codepen：https://codepen.io/coder_extends_human/pen/eLLmgb

所以我制作了一个由12首曲目组成的布局。我把开启时间的确切时间向右浮动，所以它看起来很好。我希望开放时间与“IMPRESSUM”对齐，但是我这样做的方式并不起作用。我尝试将最小内容和最大内容添加到轨道中，包括开放时间，但它仍然会搞砸。 CSS网格仍然非常混乱，虽然我已经在这个问题上工作了4个小时:(

提前致谢

.main {
display: grid;
grid-template-columns: repeat(12, 1fr);}

答案

我希望，我理解你的问题，并希望将文本“开放时间”与文本“Impressum”对齐。

您可以执行以下操作：

.f3 {
    text-align: right;
    width: 100%; // Set the width to the width of the parent
}

另一答案

你的问题不是网格问题;你的“开放时间”和所有时间本身都在一个容器元素（<section class=five>）中，而这个容器就是网格项。容器跨越3列（顺便说一句，你想删除width上的显式section，它会使你的元素溢出列），然后内容只是正常格式化;他们不关心外部网格。

因此，使用普通的块布局机制。将“Opening Times”元素设置为正常块（现在它被设置为inline-block）并在其上使用text-align: right，如@Batajus所示。

使用浏览器上的开发工具应该相当清楚地显示这些事实，以及元素的大小和位置; Chrome和Firefox都会显示网格容器的网格线（因此您可以告诉您“开放时间”元素没有以任何方式与它们对齐）。