当前位置：Gxlcms > css > 5种css实现左中右布局的方式

5种css实现左中右布局的方式

时间：2021-07-01 10:21:17 帮助过：143人阅读

本文主要和大家介绍了css布局实现左中右布局的5种方式的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考，希望能帮助到大家。

效果如下：

左中右布局


  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport"
  6.           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9.     <style>
  10.         html *{
  11.             margin: 0;
  12.             padding: 0;
  13.         }
  14.         article{
  15.             height: 100px;
  16.         }
  17.         section{
  18.             margin-top: 10px;
  19.         }
  20.         .left{
  21.             width: 300px;
  22.             height: 100px;
  23.             background-color: #823384;
  24.             text-align: center;
  25.             font-size: 20px;
  26.             color: #fdf6e3;
  27.         }
  28.         .center{
  29.             height: 100px;
  30.             background-color: #d29922;
  31.         }
  32.         .right{
  33.             width: 300px;
  34.             height: 100px;
  35.             background-color: #0c8ac5;
  36.             text-align: center;
  37.             font-size: 20px;
  38.             color: #fdf6e3;
  39.         }
  40.     </style>
  41. </head>
  42. <body>
  43. <!--浮动布局-->
  44. <!--左浮动, 右浮动, 中间自动填充-->
  45. <section class="layout float">
  46.     <style>
  47.         .float article p{
  48.         }
  49.         .float article .left{
  50.             float: left;
  51.         }
  52.         .float article .right{
  53.             float: right;
  54.         }
  55.         .float article .center{
  56.         }
  57.     </style>
  58.     <article class="left-right-center">
  59.         <p class="left">左边</p>
  60.         <p class="right">右边</p>
  61.         <p class="center"><h1>
  62.             浮动float布局:
  63.         </h1> 左元素: float: left; 右元素: float: right; 中间元素:自动填充</p>
  64.     </article>
  65. </section>
  66. <!--绝对定位-->
  67. <section class="layout absolute">
  68.     <style>
  69.         article{
  70.             position: relative;
  71.         }
  72.         .absolute .left-center-right p{
  73.             position: absolute;
  74.         }
  75.         .absolute .left-center-right .left{
  76.             left: 0;
  77.         }
  78.         .absolute .left-center-right .center{
  79.             left: 300px;
  80.             right: 300px;
  81.         }
  82.         .absolute .left-center-right .right{
  83.             right: 0;
  84.         }
  85.     </style>
  86.     <article class="left-center-right">
  87.         <p class="left">左边</p>
  88.         <p class="center"><h1>
  89.             绝对absolute定位布局:
  90.         </h1> 左边元素: position: absolute; left: 0;
  91.             右边元素: position: absolute; right:0; 中间元素: position: absolute;left:300px; right: 300px;
  92.         </p>
  93.         <p class="right">右边</p>
  94.     </article>
  95. </section>
  96. <!--flex布局-->
  97. <section class="layout flexbox">
  98.     <style>
  99.         .flexbox .left-center-right{
  100.             display: flex;
  101.         }
  102.         .flexbox .left-center-right .left{
  103.         }
  104.         .flexbox .left-center-right .center{
  105.             flex:1;
  106.         }
  107.         .flexbox .left-center-right .right{
  108.         }
  109.     </style>
  110.     <article class="left-center-right">
  111.         <p class="left">左边</p>
  112.         <p class="center"><h1>
  113.             flex布局:
  114.         </h1> 父元素display:flex; 左右子元素设置宽度300px; 中间子元素设置flex:1;</p>
  115.         <p class="right">右边</p>
  116.     </article>
  117. </section>
  118. <!--表格布局-->
  119. <section class="table-box layout">
  120.     <style>
  121.         .table-box .left-center-right{
  122.             width: 100%;
  123.             display: table;
  124.         }
  125.         .table-box .left-center-right>p{
  126.             display: table-cell;
  127.         }
  128.         .table-box .left-center-right .left{
  129.         }
  130.         .table-box .left-center-right .center{
  131.         }
  132.         .table-box .left-center-right .right {
  133.         }
  134.     </style>
  135.     <article class="left-center-right">
  136.         <p class="left">左边</p>
  137.         <p class="center"><h1>
  138.             表格table布局:
  139.         </h1> 父元素width: 100%; display: table;
  140.             左右子元素display: table-cell; width: 300px; </p>
  141.         <p class="right">右边</p>
  142.     </article>
  143. </section>
  144. <!--网格布局-->
  145. <section class="grid layout">
  146.     <style>
  147.         .grid article{
  148.             display: grid;
  149.             width: 100%;
  150.             grid-template-rows: 100px;
  151.             grid-template-columns: 300px auto 300px;
  152.         }
  153.     </style>
  154.     <article class="left-center-right">
  155.         <p class="left">左边</p>
  156.         <p class="center"><h1>
  157.             网格grid布局:
  158.         </h1> 父元素宽度为100%,
  159.             父元素width: 100%; display:grid; grid-template-rows: 100; grid-template-columns: 300px auto 300px</p>
  160.         <p class="right">右边</p>
  161.     </article>
  162. </section>
  163. </body>
  164. </html>

相关推荐：
CSS布局之盒子模型属性

div和css布局的基本知识分享

六种css三栏布局方法示例

以上就是5种css实现左中右布局的方式的详细内容，更多请关注Gxl网其它相关文章！

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！