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

文章不知道大家是否熟悉？今天我将给大家介绍《不使用 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

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~