我应该设置哪些 CSS 属性,以便各列相互重叠,忽略水平相邻列的高度?
尝试失败
我正在尝试使用 display: grid
执行此操作,但它的行为并不如我所愿。一个例子:
header {
height: 2.0rem;
background: PeachPuff;
}
footer {
height: 2.0rem;
background: PaleGreen;
}
header,
footer,
section.app-column {
padding: 1.0rem;
}
section#main section#app-column-primary {
grid-area: primary;
height: 5.0rem;
background: Cyan;
}
section#main section#app-column-secondary {
grid-area: secondary;
height: 15.0rem;
background: Thistle;
}
section#main section#app-column-tertiary {
grid-area: tertiary;
height: 10.0rem;
background: Coral;
}
section#main {
display: grid;
grid-template-columns: repeat(3, 10.0rem);
grid-row-gap: 0.2rem;
grid-column-gap: 0.5rem;
}
section#main {
content: "This application requires a display at least 200 pixels wide.";
}
@media(min-width: 200px) {
section#main {
grid-template-areas:
"primary"
"secondary"
"tertiary";
}
}
@media(min-width: 350px) {
section#main {
grid-template-areas:
"primary secondary"
"tertiary .";
}
}
@media(min-width: 520px) {
section#main {
grid-template-areas:
"primary secondary tertiary";
}
}
<header>Header ipsum, dolor sit amet.</header>
<section id="main">
<section class="app-column" id="app-column-primary">
Primary app column
</section>
<section class="app-column" id="app-column-secondary">
Secondary app column
</section>
<section class="app-column" id="app-column-tertiary">
Tertiary app column
</section>
</section>
<footer>Footer ipsum, dolor sit amet.</footer>
3列和1列的正确结果
这就是我需要的三列("primary secondary tertiary"
)和单列("primary""secondary""tertiary"
)布局.
2 列不需要的布局
但是双列布局的第三
列从第二
列开始:
2 列的所需布局
我想要的是 tertiary
列放置忽略 secondary
列,因为它们根本不会重叠:
我如何使用 CSS 做到这一点? display: grid
适合这个吗?我应该使用 display: flex
还是其他东西(如果是这样,我需要什么 CSS 属性)?
最佳答案
取而代之的是:
@media(min-width: 350px) {
section#main {
grid-template-areas:
"primary secondary"
"tertiary .";
}
}
...创建一个 2x2 网格,如下所示:
[ primary ] [ secondary ]
[tertiary ] [ empty space ]
...这正是您所显示的问题:
这样做:
@media(min-width: 350px) {
section#main {
grid-template-areas:
"primary secondary"
"tertiary secondary";
}
}
header {
height: 2.0rem;
background: PeachPuff;
}
footer {
height: 2.0rem;
background: PaleGreen;
}
header,
footer,
section.app-column {
padding: 1.0rem;
}
section#main section#app-column-primary {
grid-area: primary;
height: 5.0rem;
background: Cyan;
}
section#main section#app-column-secondary {
grid-area: secondary;
height: 15.0rem;
background: Thistle;
}
section#main section#app-column-tertiary {
grid-area: tertiary;
height: 10.0rem;
background: Coral;
}
section#main {
display: grid;
grid-template-columns: repeat(3, 10.0rem);
grid-row-gap: 0.2rem;
grid-column-gap: 0.5rem;
}
section#main {
content: "This application requires a display at least 200 pixels wide.";
}
@media(min-width: 200px) {
section#main {
grid-template-areas: "primary" "secondary" "tertiary";
}
}
@media(min-width: 350px) {
section#main {
grid-template-areas: "primary secondary" "tertiary secondary";
}
}
@media(min-width: 520px) {
section#main {
grid-template-areas: "primary secondary tertiary";
}
}
<header>Header ipsum, dolor sit amet.</header>
<section id="main">
<section class="app-column" id="app-column-primary">
Primary app column
</section>
<section class="app-column" id="app-column-secondary">
Secondary app column
</section>
<section class="app-column" id="app-column-tertiary">
Tertiary app column
</section>
</section>
<footer>Footer ipsum, dolor sit amet.</footer>
关于html - 在 CSS 网格中对齐列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52902302/