css双飞翼布局、圣杯布局与左侧宽度固定右侧自适应布局-CSDN博客

本文链接：https://blog.csdn.net/weixin_50488897/article/details/137474330

文章讲述了使用CSS实现的各种布局方式，包括双飞翼布局（利用float和margin-left）、圣杯布局（顶部header和底部footer固定，中间自适应），以及灵活运用calc、绝对定位、相对定位、flex和grid布局来控制元素位置和宽度。

摘要由CSDN通过智能技术生成

双飞翼布局:

左右宽度固定,中间宽度自适应,且要先渲染中间
在这里插入图片描述

float+margin-left
通过设置float:left,使l,r,c三个元素成为浮动元素,
按理说lrc可以共享一行.但是由于c的width:100%占满了整个宽度,把l和r挤走了.
因此,若想让l和r跟c挤在一行,就要让l和r的宽度为0,而宽度=width+padding+border+margin,这其中只有margin值可以为负,width为200px,我们让margin=width=-200px,就能让r的宽度为0,和c挤到一排了
l同理,让l的margin-left=-100%,l也能和r,c挤在一起了

</body>
    <div class="container"> 
        <div class="c">
            <div class="main">中</div>
        </div>
        <div class="l">左</div>
        <div class="r">右</div>
    </div>
</html>

<style>
.container >div{
    float:left;//浮动元素之间共享一行
}
.main{
    padding:0 200px;//中间区域的左右padding大小为左右两个div的宽度
}
.c{
    width:100%;
    height:100vh;
    background-color: pink;
}
.l{
    margin-left: -100%;//向左移动100%
    width:200px;
    height:100vh;
    background-color: blue;
}
.r{
    margin-left: -200px;//向左移动自己的宽
    width:200px;
    height:100vh;
    background-color: red;
}
</style>

2.float+calc

  <style>
    .container {
      width: 100%;
    }
    .container::after {
        /* ::after伪元素清除浮动,解决父级塌陷问题 */
      content: "";
      display: block;
      clear: both;
    }
    .l{
      width: 200px;
      height:100vh;
      float: left;
      background-color: blue;
    }
    .r {
      width: 200px;
      height:100vh;
      float: left;
      background-color: red;
    }
    .c {
      width: calc(100% - 400px);
      height:100vh;
      background-color: pink;
      float: left;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="l"></div>
    <div class="c"></div>
    <div class="r"></div>
  </div>
</body>
</html>

圣杯布局

与双飞翼布局类似,但是顶端header和底端footer各自占据屏幕所有宽度,高度固定
在这里插入图片描述
代码实现跟双飞燕布局类似,只是加了个header和footer而已

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
</head>
<style>
  body {
    min-width: 550px;  /* 2x leftContent width + rightContent width */
    font-weight: bold;
    font-size: 20px;
  }
  #header, #footer {
    background: grey;
    text-align: center;
    height: 60px;
    line-height: 60px;
  }
  #footer {
    clear: both;
  }
  #container {
    padding-left: 200px;   /* leftContent width */
    padding-right: 150px;  /* rightContent width */
    overflow: hidden;
  }
  #container .column {
    position: relative;
    float: left;
    text-align: center;
    height: 300px;
    line-height: 300px;
  }
  #center {
    width: 100%;
    background: pink;
  }
  #left {
    width: 200px;           /* leftContent width */
    right: 200px;           /* leftContent width */
    margin-left: -100%;
    background: blue;
  }
  #right {
    width: 150px;           /* rightContent width */
    margin-left: -150px;   /* rightContent width */
    right: -150px;
    background: red;
  }
</style>
 
<body>
  <div id="header">#header</div>
  <div id="container">
    <div id="center" class="column">#center</div>
    <div id="left" class="column">#left</div>
    <div id="right" class="column">#right</div>
  </div>
  <div id="footer">#footer</div>
</body>
 
</html>

左侧宽度固定右侧自适应布局

在这里插入图片描述

float+margin-left
方法很多,跟双飞燕布局类似

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
</head>
<style>
 .left{
   width:200px;
   float:left;
   background:blue;
   height:100px;
}
.right{
   background:pink;
   height:100px;
   margin-left:200px;
}
</style>

<body>
   <div class="left"></div>
   <div class="right"></div>
</body>
</html>

子绝父相
子元素(左盒子)为绝对定位,父元素为相对定位
给右盒子设置margin-left=左盒子的宽

<!DOCTYPE html>
<html><head><meta charset="utf-8"></head>
<style>
    .main {
        width: 100%;
        height: 100%;
        position: relative;
    }
    .left {
        width: 200px;
        position: absolute;
        /* 绝对定位会让元素脱离文档流进入浮动层,右侧元素能无视掉它 */
        background: red;
        height: 100px;
    }
    .right {
        background: #000000;
        height: 100px;
        margin-left: 200px;
        /* 将margin-left设置为left盒子的宽度 */
    }
</style>

<body>
    <div class="main">
        <div class="left"></div>  
        <div class="right"></div> 
    </div>
</body>    
</html>

flex
给父元素设置flex布局,给右盒子设置flex=1

   .main {
       width: 100%;
       height: 100%;
       display: flex;
   }
   .left {
       width: 200px;
       background: blue;
       height: 100px;
   }
   .right {
       background: pink;
       height: 100px;
       flex: 1
   }

grid
网格布局,父盒子设置grid-template-columns: 200px 1fr, 左盒子grid-column：1，右grid-column：2

 .main{ 
 	width:100%;
 	height:100%;
 	display:grid;
 	grid-template-columns: 200px 1fr;
 	/* 意为左盒子宽度200px,右盒子宽度自适应 */
 }
.left{
	grid-column: 1;
	background:red;
	height:100px;
}
.right{
	grid-column: 2;
	background:blue;
	height:100px;
}