Question

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

所以我做了一个由12条轨道组成的布局。我将开放时间的确切时间浮动到右侧，因此看起来不错。我希望开放时间与“ IMPRESSUM”保持一致，但是我这样做的方式不起作用。我试图将最小内容和最大内容添加到曲目中，包括开场时间，但仍然被搞砸了。尽管我已经在这个问题上工作了4个小时，但CSS网格仍然非常令人困惑：（

预先感谢

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

Answer 1

我希望我对您的问题理解正确，并且您希望将“开放时间”文本与“ Impressum”文本结合起来。

您可以执行以下操作来获得它：

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

Answer 2

您的问题不是Grid之一。您的“开放时间”以及所有时间本身都位于单个容器元素（<section class=five>）中，而该容器就是网格项。容器跨越3列（顺便说一句，您要删除width上的显式section，这会使您的元素溢出列），然后按正常格式设置内容；他们不在乎外部网格。

因此，请使用普通的块布局机制。像@Batajus所建议的那样，将“ Opening Times”元素设置为普通块（现在将其设置为inline-block）并在其上使用text-align: right。

在浏览器上使用开发工具应该可以清楚地显示这些事实以及元素的大小和位置； Chrome和Firefox都将显示网格容器的网格线（因此您可以确定“ Opening Times”元素没有以任何方式与其对齐）。

如何在网格中正确调整开放时间？

2 个答案: