这篇文章主要介绍CSS如何实现六种自适应两栏布局方式，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！html结构 <body>
这篇文章主要介绍CSS如何实现六种自适应两栏布局方式，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
html结构
<body> <div class="wrapper"> <div class="left"></div> <div class="right"></div> </div> </body>方法一：flex布局
.wrapper{ display:flex;}.left{ width:200px; height:400px; background:black;}.right{ flex:1; height:400px; background:red;}方法二：浮动
.left{ float:left; width:200px; height:400px; background:black;}.right{ background:red; height:400px;}方法三：BFC
.left{ width:200px; height:400px; float:left; background:black;}.right{ overflow:hidden; height:400px; background:red;}方法四：position绝对定位
.wrapper{ position:relative;}.left{ width:200px; height:400px; background:black;}.right{ position:absolute; top:0; left:200px; right:0; bottom:0; background:red;}方法五：table布局
.wrapper{ display:table; width:100%;}.left,.right{ display:table-cell; height:400px}.left{ background:black;}.right{ background:red;}方法六：grid布局
.wrapper{ display:grid; width:100%; height:400px; grid-template-columns:200px auto;}.left{ background:black;}.right{ background:red;}以上是“css如何实现六种自适应两栏布局方式”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注编程网精选频道！
--结束END--
本文标题: css如何实现六种自适应两栏布局方式
本文链接: https://www.lsjlt.com/news/251016.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0