CSS的两列布局和三列布局能怎样使用？
发布时间：2022-04-11 19:30:17 所属栏目：语言 来源：互联网
导读：这篇文章主要给大家分享CSS布局的内容，CSS布局是很基础的内容，熟练掌握还是很有必要的。本文给大家介绍两列布局和三列布局的使用，这两种布局都是比价常用的，而且使用也很多。接下来就跟随小编学习一下吧。 两列布局 左列定宽，右列自适应 float + marg
|
这篇文章主要给大家分享CSS布局的内容，CSS布局是很基础的内容，熟练掌握还是很有必要的。本文给大家介绍两列布局和三列布局的使用，这两种布局都是比价常用的，而且使用也很多。接下来就跟随小编学习一下吧。 两列布局 左列定宽，右列自适应 float + margin 布局 html 代码 <body> <div id="left">左列定宽</div> <div id="right">右列自适应</div> </body> css 代码： #left { float: left; width: 200px; height: 400px; background-color: lightblue; } #right { margin-left: 200px; /* 大于或等于左列的宽度 */ height: 400px; background-color: lightgreen; } float + overflow 布局 html 代码 <body> <div id="left">左列定宽</div> <div id="right">右列自适应</div> </body> css 代码 #left { float: left; width: 200px; height: 400px; background-color: lightblue; } #right { overflow: hidden; height: 400px; background-color: lightgreen; } 绝对定位布局 html 代码： <body> <div id="parent"> <div id="left">左列定宽</div> <div id="right">右列自适应</div> </div> </body> css 代码： #parent { position: relative; } #left { position: absolute; top: 0; left: 0; width: 200px; height: 400px; background-color: lightblue; } #right { position: absolute; top: 0; left: 200px; right: 0; height: 400px; background-color: lightgreen; } table 布局 html 代码： <body> <div id="parent"> <div id="left">左列定宽</div> <div id="right">右列自适应</div> </div> </body> css 代码： #parent { width: 100%; height: 400px; display: table; } #left, #right { display: table-cell; } #left { width: 200px; background-color: lightblue; } #right { background-color: lightgreen; } flex 布局 html 代码： <body> <div id="parent"> <div id="left">左列定宽</div> <div id="right">右列自适应</div> </div> </body> css 代码： #parent { width: 100%; height: 400px; display: flex; } #left { width: 200px; background-color: lightblue; } #right { flex: 1; background-color: lightgreen; } grid 网格布局 html 代码： <body> <div id="parent"> <div id="left">左列定宽</div> <div id="right">右列自适应</div> </div> </body> css 代码： #parent { width: 100%; height: 400px; display: grid; grid-template-columns: 200px auto; } #left { background-color: lightblue; } #right { background-color: lightgreen; } （编辑：常州站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
