CSS之实现双飞翼布局和圣杯布局的三种方式

本文链接：https://blog.csdn.net/m0_74913905/article/details/130393909

本文介绍了三种CSS布局方法：一是左右浮动，通过设置float属性实现元素的左右排列；二是flex布局，利用display:flex实现灵活的弹性布局；三是父相子绝定位，结合relative和absolute定位实现复杂布局。这些技巧常用于网页设计中创建各种布局结构。

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

文章目录

一、左右浮动
二、flex布局
三、父相子绝
总结

一、左右浮动

注意：两个浮动的标签要写在一起。
示例：

<style>
/*左右浮动*/
  * {
    margin: 0;
    padding: 0;
  }

  .left{
    float: left;
    width: 200px;
    height: 100vh;
    background-color: gold;
  }

  .center{
    height: 100vh;
    background-color: aquamarine;
  }

  .right{
    float: right;
    width: 200px;
    height: 100vh;
    background-color: blueviolet;
  }
</style>

<body>
  <div class="left">我是左边的</div>
  <div class="center">我是中间的</div>
  <div class="right">我是右边的</div>
</body>

二、flex布局

<style>
/* 弹性布局实现 */
        * {
            margin: 0;
            padding: 0;
        }

        header {
            display: flex;
        }

        .left{
            width: 200px;
            height: 100vh;
            background-color: aquamarine;
        }

        .center{
            flex-grow: 1;
            height: 100vh;
            background-color: aqua;
        }

        .right{
            width: 200px;
            height: 100vh;
            background-color: aquamarine;
        }
</style>
<body>
	<div class="left">我是左边的</div>
 	<div class="center">我是中间的</div>
  	<div class="right">我是右边的</div>
</body>

三、父相子绝

<style>
 /* 定位 */
 <style>
        * {
            margin: 0;
            padding: 0;
        }

        header {
            position: relative;
        }

        .left{
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 100vh;
            background-color: aquamarine;
        }

        .center{
            margin-left: 200px;
            float: left;
            width: calc(100% - 400px);
            height: 100vh;
            background-color: aqua;
        }

        .right{
            position: absolute;
            top: 0;
            right: 0;
            float: left;
            width: 200px;
            height: 100vh;
            background-color: aquamarine;
        }
 </style>
 <body>
 	<div class="left">我是左边的</div>
 	<div class="center">我是中间的</div>
  	<div class="right">我是右边的</div>
 </body>