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

最新推荐文章于 2025-03-24 09:32:37 发布

Sunshine_ZCC

最新推荐文章于 2025-03-24 09:32:37 发布

阅读量4.7k

点赞数 1

分类专栏：前端学习

本文链接：https://blog.youkuaiyun.com/Sunshine_ZCC/article/details/51622599

版权

本文详细探讨了两种常见的前端布局技术——圣杯布局和双飞翼布局的实现原理与步骤。通过对这两种布局方式的学习，读者将能够更好地理解和应用在复杂的网页设计中，以达到灵活的页面响应效果。

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

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

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

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

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

圣杯布局

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元/天解锁文章