圣杯布局——浮动

最新推荐文章于 2023-05-19 22:33:06 发布

短短·

最新推荐文章于 2023-05-19 22:33:06 发布

阅读量177

点赞数 1

文章标签： css css3 前端

本文链接：https://blog.csdn.net/weixin_45662026/article/details/126439286

版权

什么是圣杯布局？

在CSS中，圣杯布局是指两边盒子宽度固定，中间盒子自适应的三栏布局。
圣杯布局其实和双飞翼布局是一回事。它们实现的都是三栏布局，两边的盒子宽度固定，中间盒子自适应，也就是固比固布局。它们实现的效果是一样的，差别在于其实现的思想不太一样。
接下来我们用两种方法实现圣杯布局：

1.搭建html结构

<body>
    <div class="container">
        <div class="content">中间内容</div>
        <div class="left">左边</div>
        <div class="right">右边</div>
    </div>
  
</body>

2.css样式

     <style>
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            padding-left: 200px;
            /* 预留左侧空间，为.left宽度*/
            padding-right: 300px;
            /* 预留右侧空间，为.right宽度*/
        }

        .content {
            float: left;
            width: 100%;
            height: 300px;
            background: #afbf;
        }

        .left {
            float: left;
            width: 200px;
            height: 300px;
            background: pink;
        }

        .right {
            float: left;
            width: 300px;
            height: 300px;
            background: aqua;
        }
    </style>

实现的效果为: 在这里插入图片描述

显而易见，三栏没有在一行显示。现在需要把left放到左侧，right放到右侧。需要用到css的负margin,还有position，把left放到预留的位置。

3.让左边的盒子上去
把左边盒子移动到左边

.left {
float；left;
width:200px;
height:300px;
background:pink;
margin-left:-100%;    /*100%是父元素的宽度*/
position:relative;
right:200px;
/*由于父盒子设置了padding值，所以需要向左移动自身宽度*/
}

4.让右边的盒子上去

.right {
	float:left;
	width:300px;
	height:300px;
	background:aqua;
	/*同理，向右移动自身宽度*/
	margin-left:-300px
}

实现效果图为：
在这里插入图片描述

短短·

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
圣杯布局——浮动

在CSS中，圣杯布局是指两边盒子宽度固定，中间盒子自适应的三栏布局。圣杯布局其实和双飞翼布局是一回事。它们实现的都是三栏布局，两边的盒子宽度固定，中间盒子自适应，也就是固比固布局。它们实现的效果是一样的，差别在于其实现的思想不太一样。接下来我们用两种方法实现圣杯布局：1.搭建html结构。
复制链接

扫一扫