第一次写博客,语言组织不好,请大家谅解!
相信很多人都搜过圣杯布局和双飞翼布局,也知道他们的由来,在这里我就不一一赘述了,今天主要讲的是当我遇到两个布局时,我是怎样一步一步从开始到实现的过程,例如:刚开始我也不懂为什么圣杯布局和双飞翼布局的区别,不懂圣杯布局为什么会有相对定位等一些问题,在这里给大家讲下我的理解,如有错误,欢迎批评指正。
好了,接下来开始今天的写文章之旅!
圣杯布局和双飞翼布局实现的问题都是三列布局,两边定宽,中间自适应布局,要注意的是 中间栏(重要的东西)要在放在文档流前面以优先渲染。
圣杯布局
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>