css 实现两行高度自适应
在构建响应式布局时，如何让一行中的两行高度自适应，以适应内容的变化，而不使用 flex 或 grid 布局呢？
代码示例：
123
解决方案
立即学习“前端免费学习笔记（深入）”；
可以使用 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 灵活自适应两行的高度？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1630502.html
微信扫一扫 
支付宝扫一扫 
