圣杯布局和双飞翼布局的实现过程

最新推荐文章于 2023-08-19 17:02:38 发布

VIP文章 Sunshine_ZCC

最新推荐文章于 2023-08-19 17:02:38 发布

阅读量4.5k

点赞数 1

分类专栏：前端学习

本文链接：https://blog.csdn.net/sunshine_zcc/article/details/51622599

版权

第一次写博客，语言组织不好，请大家谅解！

相信很多人都搜过圣杯布局和双飞翼布局，也知道他们的由来，在这里我就不一一赘述了，今天主要讲的是当我遇到两个布局时，我是怎样一步一步从开始到实现的过程，例如：刚开始我也不懂为什么圣杯布局和双飞翼布局的区别，不懂圣杯布局为什么会有相对定位等一些问题，在这里给大家讲下我的理解，如有错误，欢迎批评指正。

好了，接下来开始今天的写文章之旅！

圣杯布局和双飞翼布局实现的问题都是三列布局，两边定宽，中间自适应布局，要注意的是中间栏(重要的东西)要在放在文档流前面以优先渲染。

圣杯布局

1、首先定义三列，为它们设置简单的css样式，代码如下：

<!-- 圣杯布局 -->
<!DOCTYPE html>
<html>
<head>
<style>      
       .left{
            background: #E79F6D;
            width:150px;
            float:left;
        }
        .main{
            background: #D6D6D6;
            width:100%;
            float:left;	
        }
        .right{
            background: #77BBDD;
            width:190px;
            float:left;
        }
</style>
</head>
    <body>
	<div class="con">
    		<div class="main">Main</div>
   	 	<div class="left">Left</div>
    		<div class="right">Right</div>
	</div>
    </body>
</html>

最低0.47元/天解锁文章

Sunshine_ZCC

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
2
评论
圣杯布局和双飞翼布局的实现过程

第一次写博客，语言组织不好，请大家谅解！相信很多人都搜过圣杯布局和双飞翼布局，也知道他们的由来，在这里我就不一一赘述了，今天主要讲的是当我遇到两个布局时，我是怎样一步一步从开始到实现的过程，例如：刚开始我也不懂为什么圣杯布局和双飞翼布局的区别，不懂圣杯布局为什么会有相对定位等一些问题，在这里给大家讲下我的理解，如有错误，欢迎批评指正。好了，接下来开始今天的写文章之旅！圣
复制链接

扫一扫