如何有效实施CSS的三列布局布局?
发布时间:2024-07-05 16:02:29 所属栏目:语言 来源:DaWei
导读: 这篇文章主要给大家分享CSS布局的内容,CSS布局是很基础的内容,熟练掌握还是很有必要的。本文给大家介绍三列布局的使用,这两种布局都是比价常用的,而且使用也很多。接下来就跟随小编学习
这篇文章主要给大家分享CSS布局的内容,CSS布局是很基础的内容,熟练掌握还是很有必要的。本文给大家介绍三列布局的使用,这两种布局都是比价常用的,而且使用也很多。接下来就跟随小编学习一下吧。 两列定宽,一列自适应 1.float + margin 布局 html 代码: <body> <div id="parent"> <div id="left">左列定宽</div> <div id="center">中间列定宽</div> <div id="right">右列自适应</div> </div> </body> css 代码: #parent { height: 400px; } #left { float: left; width: 100px; height: 400px; background-color: lightblue; } #center { float: left; width: 200px; 原创图片与内容无关,仅为配文美观 height: 400px;background-color: lightgrey; } #right { margin-left: 300px; /* 左列的宽度 + 中间列的宽度 */ height: 400px; background-color: lightgreen; } 2.float + overflow 布局 html 代码: <body> <div id="parent"> <div id="left">左列定宽</div> <div id="center">中间列定宽</div> <div id="right">右列自适应</div> </div> </body> css 代码: #parent { height: 400px; } #left { float: left; width: 100px; height: 400px; background-color: lightblue; } #center { float: left; width: 200px; height: 400px; background-color: lightgrey; } #right { overflow: hidden; height: 400px; background-color: lightgreen; } 3.table 布局 html 代码: <body> <div id="parent"> <div id="left">左列定宽</div> <div id="center">中间列定宽</div> <div id="right">右列自适应</div> </div> </body> css 代码: #parent { display: table; width: 100%; height: 400px; } #left { display: table-cell; width: 100px; background-color: lightblue; } #center { display: table-cell; width: 200px; background-color: lightgrey; } #right { display: table-cell; background-color: lightgreen; } 4.flex 布局 html 代码: <body> <div id="parent"> <div id="left">左列定宽</div> <div id="center">中间列定宽</div> <div id="right">右列自适应</div> </div> </body> css 代码: #parent { display: flex; width: 100%; height: 400px; } #left { width: 100px; background-color: lightblue; } #center { width: 200px; background-color: lightgrey; } #right { flex: 1; background-color: lightgreen; } 5.grid 布局 html 代码 <body> <div id="parent"> <div id="left">左列定宽</div> <div id="center">中间列定宽</div> <div id="right">右列自适应</div> </div> </body> css 代码 #parent { display: grid; grid-template-columns: 100px 200px auto; width: 100%; height: 400px; } #left { background-color: lightblue; } #center { background-color: lightgrey; } #right { background-color: lightgreen; } 以上就是CSS布局的相关介绍啦,上述几种CSS布局示例代码有一定的借鉴价值,有需要的朋友可以参考。希望对大家学习CSS布局有帮助。 (编辑:拼字网 - 核心网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
推荐文章
站长推荐