gpt4 book ai didi

css - 如何使两个 Flex 列在 CSS 中表现得像一个表格?

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

我不相信我所要求的东西可以用纯 CSS 实现,但无论如何我都会问,希望有另一种方法或我遗漏的东西。

这是我当前布局的示例,使用 flexbox 实现:

enter image description here

这非常有效。但是,如果我在“列内列”div 下方的第 1 列中添加更多内容,会怎样呢?然后我还想将内容添加到第 2 列,但我希望它占据与我刚刚添加到第 1 列的元素相同的垂直空间?换句话说,就好像一切都是一个表格,而那些元素位于相邻表格单元格的同一行中?

这是布局表单时的一个常见问题,例如,您想要在列中对元素(城市、州、邮政编码)进行分组,并且您想要并排跟踪表单中的内容。

(我只是在列周围设置了灰色边框以帮助描绘标记,但通常它们不会是多列表单布局中列之间的边界)

因此,最终结果将如下面的第二张图片所示:

enter image description here

这是演示的结构化 HTML:

.container {
display: flex;
}

.column {
flex-grow: 1;
/* fill parent space based on child content */
flex: 1 1 0;
/* fill parent space equally regardless of child content*/
}

.column.row {
display: flex;
flex-wrap: wrap;
}

.column.row div {
flex-grow: 1;
}

.column.row h2 {
width: 100%;
}
<div class="container">
<div class="column">
<h1>Column 1 Layout Goes here</h1>
<div>Form Field</div>
<div>Form Field</div>
<div>Form Field</div>
<div class="column row">
<h2>Column within column</h2>
<div>Form Field</div>
<div>Form Field</div>
<div>Form Field</div>
</div>
<div>Form Field "Y" Added</div>
</div>
<div class="column">
<h1>Column 2 layout goes here</h1>
<div>Form Field</div>
<div>Form Field</div>
<div>Form Field</div>
<div>Form Field Should Track with Form Field "Y" but How?</div>
</div>
</div>

enter image description here

最佳答案

您可以使 .column 元素成为 flex 容器(即将 display: flex 也应用于 .column 元素)具有 flex-direction: column; 并将 margin-top: auto; 应用到第二列的最后一个 div 以将其移动到其底部容器:

.container {
display: flex;
}

.column {
flex-grow: 1; /* fill parent space based on child content */
flex: 1 1 0; /* fill parent space equally regardless of child content*/
display: flex;
flex-direction: column;
}

.column.row {
display: flex;
flex-wrap: wrap;
}

.column.row div {
flex-grow: 1;
}

.column.row h2 {
width: 100%;
}
.column > div:last-child {
margin-top: auto;
}
<div class="container">
<div class="column">
<h1>Column 1 Layout Goes here</h1>
<div>Form Field</div>
<div>Form Field</div>
<div>Form Field</div>
<div class="column row">
<h2>Column within column</h2>
<div>Form Field</div>
<div>Form Field</div>
<div>Form Field</div>
</div>
<div>Form Field "Y" Added</div>
</div>
<div class="column">
<h1>Column 2 layout goes here</h1>
<div>Form Field</div>
<div>Form Field</div>
<div>Form Field</div>
<div>Form Field Should Track with Form Field "Y" but How?</div>
</div>

关于css - 如何使两个 Flex 列在 CSS 中表现得像一个表格?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57693613/

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