三栏布局了解一下

最新推荐文章于 2024-10-30 16:25:45 发布

多一点开心

最新推荐文章于 2024-10-30 16:25:45 发布

阅读量227

点赞数 1

分类专栏： css 文章标签： css css3

本文为博主原创文章，署名（BY）-非商业性使用（NC）-禁止演绎（ND），转载请附上原文链接和本申明。

本文链接：https://blog.csdn.net/qq_38060231/article/details/107665099

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

CSS-三栏布局

一、float
二、position
三、圣杯
四、双飞翼
五、table
六、flex
七、grid

 三栏布局了解一下：布局分为左中右三栏，其中左右两栏宽度固定，中间栏宽度自适应

一、float

<html>
   <head>
   	<meta charset="utf-8" />
   	<title></title>
   	<style>
   	  .A {
   	    color: #fff;
     }
     .B {
       width: 100px;
       height: 50px;
       float: left;
       background-color: #ffcf53;
     }
     .C {
       width: 200px;
       height: 50px;
       float: right;
       background-color: #00bcd4;
     }
     .D {
       height: 50px;
       margin: 0 200px 0 100px;
       background-color: #19d896;
     }
   	</style>
   </head>
   <body>
   	<div class="A">
   	  <div class="B">left</div>
   	  <div class="C">right</div>
   	  <div class="D">center</div>
   	</div>
   </body>
</html>

效果图(效果图相同的将不再重复)
在这里插入图片描述

二、position

<html>
   <head>
   	<meta charset="utf-8" />
   	<title></title>
   	<style>
   	  .A {
   	    color: #fff;
   	    position: relative;
     }
     .B {
       position: absolute;
       width: 100px;
       height: 50px;
       left: 0;
       background-color: #ffcf53;
     }
     .C {
       position: absolute;
       width: 200px;
       height: 50px;
       right: 0;
       background-color: #00bcd4;
     }
     .D {
       height: 50px;
       margin: 0 200px 0 100px;
       background-color: #19d896;
     }
   	</style>
   </head>
   <body>
   	<div class="A">
   	  <div class="B">left</div>
   	  <div class="C">right</div>
   	  <div class="D">center</div>
   	</div>
   </body>
</html>

三、圣杯

为了方便理解，将逐步添加样式，中间栏： width:100%; 左中右栏： float:left;

<html>
 <head>
 	<meta charset="utf-8" />
 	<title></title>
 	<style>
 	  .A {
 	    color: #fff;
   }
   .B {
     width: 100px;
     height: 50px;
     background-color: #ffcf53;
     float: left;/*添加*/
   }
   .C {
     width: 200px;
     height: 50px;
     background-color: #00bcd4;
     float: left;/*添加*/
   }
   .D {
     width: 100%;/*添加*/
     height: 50px;
     background-color: #19d896;
     float: left;/*添加*/
   }
 	</style>
 </head>
 <body>
 	<div class="A">
 	  <div class="D">center</div>
 	  <div class="B">left</div>
 	  <div class="C">right</div>
 	</div>
 </body>
</html>

效果图如下
在这里插入图片描述
左边栏： margin-left: -100%; 右边栏： margin-left: -200px;

   .B {
     width: 100px;
     height: 50px;
     background-color: #ffcf53;
     float: left;
     margin-left: -100%;/*添加*/
   }
   .C {
     width: 200px;
     height: 50px;
     background-color: #00bcd4;
     float: left;
     margin-left: -200px;/*添加*/
   }

效果图
在这里插入图片描述
如上图所示中间栏的文字center被左边栏遮盖，这可不是我们想要的结果
父层添加： padding: 0 200px 0 100px; （为左右栏提供位置）

 	  .A {
 	    color: #fff;
 	    padding: 0 200px 0 100px;/*添加*/
   }

窗口宽度调的太小了，左边栏和中间栏都被挡住了
在这里插入图片描述
把窗口宽度调大一点，效果图如下

左边栏： position: relative; left: -100px; 右边栏： position: relative; right: -200px;

<html>
 <head>
 	<meta charset="utf-8" />
 	<title></title>
 	<style>
 	  .A {
 	    color: #fff;
 	    padding: 0 200px 0 100px;
   }
   .B {
     width: 100px;
     height: 50px;
     background-color: #ffcf53;
     float: left;
     margin-left: -100%;
     position: relative;/*添加*/
     left: -100px;/*添加*/
   }
   .C {
     width: 200px;
     height: 50px;
     background-color: #00bcd4;
     float: left;
     margin-left: -200px;
     position: relative;/*添加*/
     right: -200px;/*添加*/
   }
   .D {
     width: 100%;
     height: 50px;
     background-color: #19d896;
     float: left;
   }
 	</style>
 </head>
 <body>
 	<div class="A">
 	  <div class="D">center</div>
 	  <div class="B">left</div>
 	  <div class="C">right</div>
 	</div>
 </body>
</html>

最终效果图
在这里插入图片描述

四、双飞翼

双飞翼布局和圣杯布局类似，不同点在于处理让中间栏不被左右栏覆盖的方法不同
让我们回到最初的起点。。。

<html>
 <head>
 	<meta charset="utf-8" />
 	<title></title>
 	<style>
 	  .A {
 	    color: #fff;
   }
   .B {
     width: 100px;
     height: 50px;
     background-color: #ffcf53;
     float: left;
     margin-left: -100%;
   }
   .C {
     width: 200px;
     height: 50px;
     background-color: #00bcd4;
     float: left;
     margin-left: -200px;
   }
   .D {
     width: 100%;
     height: 50px;
     background-color: #19d896;
     float: left;
   }
 	</style>
 </head>
 <body>
 	<div class="A">
 	  <div class="D">center</div>
 	  <div class="B">left</div>
 	  <div class="C">right</div>
 	</div>
 </body>
</html>

效果图
在这里插入图片描述
为了不让中间栏被左右栏挡住，于是乎给中间栏再加一层div

<html>
 <head>
 	<meta charset="utf-8" />
 	<title></title>
 	<style>
 	  .A {
 	    color: #fff;
   }
   .B {
     width: 100px;
     height: 50px;
     background-color: #ffcf53;
     float: left;
     margin-left: -100%;
   }
   .C {
     width: 200px;
     height: 50px;
     background-color: #00bcd4;
     float: left;
     margin-left: -200px;
   }
   .D {
     width: 100%;
     height: 50px;
     background-color: #19d896;
     float: left;
   }
   .E {
     margin-left: 100px;/*添加*/
     margin-right: 200px;/*添加*/
   }
 	</style>
 </head>
 <body>
 	<div class="A">
 	  <div class="D">
 	    <div class="E">center</div><!--添加-->
 	  </div>
 	  <div class="B">left</div>
 	  <div class="C">right</div>
 	</div>
 </body>
</html>

最终效果图和圣杯布局一样

五、table

<html>
 <head>
 	<meta charset="utf-8" />
 	<title></title>
 	<style>
 	  .A {
 	    color: #fff;
 	    display: table;
     width: 100%;
   }
   .B {
     width: 100px;
     height: 50px;
     background-color: #ffcf53;
     display: table-cell;
   }
   .C {
     width: 200px;
     height: 50px;
     background-color: #00bcd4;
     display: table-cell;
   }
   .D {
     height: 50px;
     background-color: #19d896;
     display: table-cell;
   }
 	</style>
 </head>
 <body>
 	<div class="A">
 	  <div class="B">left</div>
 	  <div class="D">center</div>
 	  <div class="C">right</div>
 	</div>
 </body>
</html>

六、flex

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

<html>
 <head>
 	<meta charset="utf-8" />
 	<title></title>
 	<style>
 	  .A {
 	    color: #fff;
 	    display: flex;
   }
   .B {
     width: 100px;
     height: 50px;
     background-color: #ffcf53;
     flex-shrink: 0;
     /*flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
      * 如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。
      * 如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。*/
   }
   .C {
     width: 200px;
     height: 50px;
     background-color: #00bcd4;
     flex-shrink: 0;
   }
   .D {
     width: 100%;
     height: 50px;
     background-color: #19d896;
   }
 	</style>
 </head>
 <body>
 	<div class="A">
 	  <div class="B">left</div>
 	  <div class="D">center</div>
 	  <div class="C">right</div>
 	</div>
 </body>
</html>

七、grid

<html>
 <head>
 	<meta charset="utf-8" />
 	<title></title>
 	<style>
 	  .A {
 	    color: #fff;
 	    display: grid;
     grid-template-rows: 50px;/*设置每一行的行高*/
     grid-template-columns: 100px auto 200px;/*设置每一列的列宽*/
   }
   .B {
     background-color: #ffcf53;
   }
   .C {
     background-color: #00bcd4;
   }
   .D {
     background-color: #19d896;
   }
 	</style>
 </head>
 <body>
 	<div class="A">
 	  <div class="B">left</div>
 	  <div class="D">center</div>
 	  <div class="C">right</div>
 	</div>
 </body>
</html>