gpt4 book ai didi

css - 将 flex 元素放置在网格中的彼此之上而不包裹它们

转载 作者:行者123 更新时间:2023-11-28 10:37:10 24 4
gpt4 key购买 nike

<分区>

我有以下使用 flexbox 的布局:

enter image description here

我想在右侧放置包含 2 的 div,TeamScorers 应该弥补左边。

要求的布局: enter image description here

如果使用表格,这与行跨度为 2 的 2 div 的想法相同。

有没有办法将 TeamScorers 放在 2 的左侧,而不用将它们包装在自己的 div 中?如果是这样,这值得吗?

到目前为止,这是我的 CSS:

.container {
max-width: 600px;
}

.team {
background-color: chartreuse;
}

.score {
background-color: brown;
}

.scorers {
background-color: steelblue;
}

.cards-desktop {
background-color: goldenrod;
}

.carded-players {
background-color: darkorange;
}

.left-col {
display: flex;
flex-flow: row wrap;
}
.left-col > * {
flex: 1 100%;
}

.team {
order: 1;
}

.score {
order: 3;
}

.scorers {
order: 2;
}

.cards-desktop {
order: 4;
}

.carded-players {
order: 5;
}

.team {
flex: 1 auto;
}

.score {
flex: 0 150px;
font-size: 60px;
}

其他断点的布局会有所不同,因此我希望有一个 HTML block 不会被其他断点复制或模仿。这就是为什么我不想将这两个 div 包装在一个容器中,因为它在其他断点的布局上是不必要的。

Codepen Link

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com