html结构
<body> <div class="wrapper"> <div class="left"></div>说明方法有哪些 <div class="right"&g医学有哪些专业t;</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; b经典英文歌ackground: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实现六种自适应两栏布局方式的文章就介绍到这了,更多相关css 自适宣州谢朓楼饯别校书叔云应两栏布局内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章，希望大家以后多多支持www.887551.com！
本文发布于:2023-04-03 20:57:17，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/9de07cf67395a0ee47d5ba82248415ef.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：css实现六种自适应两栏布局方式.doc
本文 PDF 下载地址：css实现六种自适应两栏布局方式.pdf
| 留言与评论（共有 0 条评论） |
