两/三栏布局(圣杯双飞翼)

最新推荐文章于 2025-08-19 08:41:01 发布

原创最新推荐文章于 2025-08-19 08:41:01 发布 · 232 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #javascript

本文介绍了常见的页面布局方式，包括两栏布局（左边定宽，右边自适应）以及三栏布局的重点——圣杯布局和双飞翼布局。这两种布局方法旨在实现左右定宽，中间自适应的效果。圣杯布局通过设置内外边距和浮动来定位，而双飞翼布局则利用浮动和外边距以及定位来达到相同目的。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

常用的页面布局（两栏布局、三栏（圣杯、双飞翼）布局）

1. 两栏布局，左边定宽，右边自适应

	//html
	<div class="left">左边定宽</div>
	<div class="right">右边自适应</div>

左边在浮动，右边加overflow：hidden；变成BFC清除左侧浮动元素的影响

 .left{
    float: left;
    width: 200px;
    background: green;
 }
.right{
    overflow: hidden;
    background: red;
 }

2. 三栏布局，（圣杯布局、双飞翼布局）

圣杯布局和双飞翼布局都是用来做三栏布局的，左右定宽，中间自适应

圣杯布局

给外面的大盒子设置左右内边距，把两边的盒子位置撑起来，给所有的子盒子设置左浮，中间的盒子width设置为100%，给左边的盒子设置的宽度跟给父盒子设置的左内边距一样，右边的盒子同理，给左通过左外边距移动到指定的位置，并通过定位移动，右盒子同理

<div class="content">
		//把center放在最前面，网卡的时候就是中间最先加载出来
        <div class="center column">1</div>
        <div class="left column">2</div>
        <div class="right column">3</div>
    </div>

	 body{
            min-width: 550px; //给盒子设置小宽度
        }
        .content{
        //把左右两边的内容用padding撑出来
            padding-left: 150px; 
            padding-right: 200px;
        }
         .column{
         	//给所有的子盒子设置左浮
            float: left;
        } 
        .center{
        //让中间盒子的宽度成为100%
            width: 100%;
            background-color: aqua;
        }
        .left{
        //左边盒子的宽度和父盒子设置的内边距一样
            width: 150px;
            background-color: pink;
            margin-left: -100%; //放置之前预留处的位置上，这里使用负外边距
            position: relative; //然后还使用定位的方法
            right: 150px;
        }
        .right{
        //右边边盒子的宽度和父盒子设置的内边距一样
            width: 200px;
            background-color: plum;
            margin-right: -200px; //放置之前预留处的位置上，这里使用负外边距
        }

双飞翼布局

首先设置大盒子的宽度为width为100%，给所有的子盒子设置左浮，给中间的大盒子设置左右外边距，把两边的盒子位置撑起来，给左边的盒子设置的宽度跟给父盒子设置的左外边距一样，右边的盒子同理，给left通过左外边距移动到指定的位置，right盒子同理

	<div class="main cloumn" >
        <div class="center">1</div>
    </div>
    <div class="left cloumn">2</div>
    <div class="right cloumn">3</div>

	body{
            min-width: 500px;	//给盒子设置小宽度
        }
        .main{
            width: 100%; //给中间大盒子的父盒子设置宽度100%
        }
        .cloumn{
            float: left; //给所有的子盒子设置左浮
        }
        .center{
        //把左右两边的内容用margin撑出来
            margin-left: 200px; 
            margin-right: 150px;
            background-color: blueviolet;  //背景颜色
        }
        .left{
            background-color: coral;  //背景颜色
            width: 200px; 
            margin-left: -100%; //放置之前预留处的位置上，这里使用负外边距
        }
        .right{
            background-color: cornflowerblue; //背景颜色
            width: 150px;
            margin-left: -150px;  //放置之前预留处的位置上，这里使用负外边距
        }