CSS如何实现三列布局?实现三列布局的3种方法(代码示例)

如果下载的源码需要作者授权,请更换源码。本站免费分享资源不会增加授权

本篇文章给大家带来的内容是介绍CSS如何实现三列布局?实现三列布局的3种方法(代码示例)。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

三列布局指的是两边两列定宽,中间的宽度自适应。

常用三种方法:

  • 定位

  • 浮动

  • 弹性盒布局

定位方式

最直观和容易理解的一种方法,左右两栏选择绝对定位,固定于页面的两侧,中间的主体选择用margin确定位置

<!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <title>定位方法创建三列布局</title>     <style>     *{         margin: 0;         padding: 0;     }     .left{         width: 200px;         height: 500px;         background-color: yellow;         position: absolute; /* 绝对定位,使位置固定 */         left: 0;         top: 0;     }     .center{         height: 600px;         background-color: purple;         margin: 0 300px 0 200px;   /* 通过外边距确定宽度 */     }     .right{         width: 300px;         height: 500px;         background-color: red;         position: absolute; /* 绝对定位,使位置固定 */         right: 0;         top: 0;     }      </style> </head> <body>     <div>Left</div>     <div>Center</div>     <div>Right</div> </body> </html>

结果

CSS如何实现三列布局?实现三列布局的3种方法(代码示例)

浮动方法

让左右两边部分浮动,脱离文档流后对中间部分使用margin来自适应

<!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <title>浮动法创建三列布局</title>     <style>         *{             margin: 0;             padding: 0;         }         .left{         width: 200px;         height: 500px;         background-color: yellow;         float: left;     }     .center{         height: 600px;         background-color: purple;         margin: 0 300px 0 200px;         min-width: 100px;  /* 最小宽度,防止浏览器缩小后中间部分被隐藏 */     }     .right{         width: 300px;         height: 500px;         background-color: red;         float: right;     }     </style> </head> <body>     <div>Left</div>     <div>Right</div>     <div>Center</div>  <!-- 左右部分脱离文档流,中间部分平铺 --> </body> </html>

弹性盒布局

使用容器包裹三栏,并将容器的display设置为flex,左右两部分宽度设置为固定,中间flex设置为1,左右两边的值固定,所以中间的自适应

 <!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <title>弹性盒子创建三列布局</title>     <style>         *{             margin: 0;             padding: 0;         }         .container{             display: flex;         }         .left{         width: 200px;         height: 500px;         background-color: yellow;     }     .center{         height: 600px;         flex: 1;         background-color: purple;     }     .right{         width: 300px;         height: 500px;         background-color: red;     }     </style> </head> <body>     <div>         <div>Left</div>         <div>Center</div>           <div>Right</div>     </div> </body> </html>
本文由(壳先生)整理自网络,如转载请注明出处:https://www.mrshell.com;
本站发布的内容若侵犯到您的权益,请邮件联系 i@mrshell.com 删除,我们将及时处理!
===========================================================================

1. 本站大部分下载资源收集于网络,不保证其完整性以及安全性,请下载后自行测试。
2. 本站资源仅供学习和交流使用,版权归资源原作者所有,请在下载后24小时之内自觉删除。
3. 不得使用于非法商业用途,商用请支持正版!不得违反国家法律,否则后果自负!
4. 若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,与本站无关。
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

=================================================================

壳先生 » CSS如何实现三列布局?实现三列布局的3种方法(代码示例)

发表评论

提供最优质的资源集合

立即查看 了解详情