不使用 Flex 或 Grid，如何实现 CSS 灵活自适应两行的高度？

css 实现两行高度自适应

在构建响应式布局时，如何让一行中的两行高度自适应，以适应内容的变化，而不使用 flex 或 grid 布局呢？

代码示例：

<div class="f">
    <div class="h">123</div>
    <div class="s"></div>
</div>

解决方案

可以使用 display: table 属性让父元素像一张表格，子元素像行：

.f {
    display: table;
    width: 100%;
    height: 100vh;
}

.h, .s {
    display: table-row;
}

.h {
    height: 50px;
}

原理：

• display: table 将父元素变成一个表格，可以让子元素排列成行。
• display: table-row 将子元素变成表格行，可以自动分配高度。
• 固定高度在第一行（.h），其余高度自动分配给第二行（.s）。

注意：

• display: table 属性可能会影响其他布局和样式，建议在需要时谨慎使用。
• 可通过 javascript 动态调整高度，实现更复杂的响应式布局。

参考：

https://jsrun.net/vkpkp/edit

以上就是不使用 Flex 或 Grid，如何实现 CSS 灵活自适应两行的高度？的详细内容，更多请关注其它相关文章！