星空网 > 软件开发 > 网页设计

圣杯布局和双飞翼布局

圣杯布局和双飞翼布局主要用来解决以下问题:

1.三列布局,两侧定宽,中间自适应。2.中间栏在浏览器中优先加载渲染。

解决思路:

首先把中间的div写到前面,然后左侧,然后右侧。这样就解决了第二个问题,中间的div优先渲染。

但是这样会存在一个问题,写到前面的也会显示在前面。

为了解决这个问题,我们让这三列都浮动起来。然后设置中间列宽度为100%。

此时中间列在第一行,左右都在第二行。此时只需要将左列移动到中间的左边,右列移动到中间的右边。我们给左右加一个固定宽度,比如150px。

然后给左列加一个负边距,margin-left:-100%;右列加一个负边距margin-left:-150px;

此时可以看到三列布局已经形成。但是问题在于,中间div的内容被挡住了。在解决这个问题上,圣杯布局和双飞翼布局开始出现不同的思路。

圣杯布局首先给三列div外面套上一个div,我们可以使用语义化标签article。将article设置了左右padding-left和padding-right后,将左右两个div用相对布局position: relative。此时可以看到三列都向中间缩进了。然后再分别给左右两列增加right和left的负值,就可以达到目的了。

代码如下:

圣杯布局html代码:

<body> <article> <div class="main"> 我是中间 </div> <div class="left"> 我是左 </div> <div class="right"> 我是右 </div> </article></body>

 

圣杯布局css代码:*{  margin: 0;  padding: 0;}article{  padding-left:150px;  padding-right:150px;}.main{  background-color: lightblue;  width:100%;  }.left{  background-color: yellowgreen;  width:150px;  margin-left:-100%;  position: relative;  /*left:-150px;*/}.right{  background-color: pink;  width:150px;  margin-left:-150px;  position: relative;  /*right:-150px;*/}.main,.left,.right{  float: left;}

 

双飞翼布局则是在中间div内部创建子div用于放置内容,在该子div里用margin-left和margin-right为左右两栏div留出位置。

代码如下:

双飞翼布局html代码:<body>  <div class="main">    <div class="inside">    我是中间    </div>        </div>  <div class="left">    我是左  </div>  <div class="right">    我是右  </div></body>

双飞翼布局css代码:*{  margin: 0;  padding: 0;}.main{  background-color: lightblue;  width:100%;  }.inside{  margin-left:150px;  margin-right:150px;}.left{  background-color: yellowgreen;  width:150px;  margin-left:-100%;}.right{  background-color: pink;  width:150px;  margin-left:-150px;}.main,.left,.right{  float: left;}

 

接下来如果我们想让三列等高,可以给三列分别增加属性padding-bottom: 9999px;margin-bottom: -9999px;来将三列拉到无限长。再给三列外面的article标签加上overflow: hidden;属性就行了。

Ending。

 




原标题:圣杯布局和双飞翼布局

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

江西庐山风景区:https://www.vstour.cn/t/江西庐山风景区.html
江西庐山景点:https://www.vstour.cn/t/江西庐山景点.html
江西庐山两日游:https://www.vstour.cn/t/江西庐山两日游.html
江西庐山旅行:https://www.vstour.cn/t/江西庐山旅行.html
江西庐山旅游:https://www.vstour.cn/t/江西庐山旅游.html
江西庐山旅游攻略:https://www.vstour.cn/t/江西庐山旅游攻略.html
深圳大运中心周边酒店住宿推荐:https://www.vstour.cn/a/336169.html
八台山有哪些景点要收门票 八台山风景名胜区门票:https://www.vstour.cn/a/336170.html
相关文章
我的浏览记录
最新相关资讯
跨境电商服务平台 | 深圳旅行社 | 东南亚物流