其他分享
首页 > 其他分享> > 三栏布局[圣杯布局、双飞翼布局]

三栏布局[圣杯布局、双飞翼布局]

作者:互联网

引言

圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式。两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局,中间栏要在放在文档流前面以优先渲染。

区别

圣杯布局:为了让中间div内容不被遮挡,将中间div设置了左右padding-left和padding-right后,将左右两个div用相对布局position: relative并分别配合right和left属性,以便左右两栏div移动后不遮挡中间div。

双飞翼布局:为了让中间div内容不被遮挡,直接在中间div内部创建子div用于放置内容,在该div里用margin-left和margin-right为左右两栏div留出位置。

需要注意的是:要给body设置一个最小的宽度min-width: 550px;
圣杯布局

// dom结构
<div id="container">
	<div id="center" class="float"></div>
	<div id="left" class="float"></div>
	 <div id="right" class="float"></div>
 </div>
body {
  min-width: 550px;
}
div {
    height: 200px;
}
#container {
  padding-left: 200px; 
  padding-right: 150px;
}

#container .float {
  float: left;
}

#center {
  width: 100%;
  background-color: pink;
}

#left {
  width: 200px; 
  margin-left: -100%;
  position: relative;
  right: 200px;
  background-color: red;
}

#right {
  width: 150px; 
  margin-right: -150px; 
  background-color: green;
}

双飞翼布局

// dom结构
<div id="container" class="column">
  <div id="center"></div>
</div>
<div id="left" class="column"></div>
<div id="right" class="column"></div>
body {
  min-width: 500px;
}
div {
height: 200px;
}
#container {
  width: 100%;
}
.column {
  float: left;
}     
#center {
  margin-left: 200px;
  margin-right: 150px;
  background-color: red;
}
#left {
  width: 200px; 
  margin-left: -100%;
  background-color: green;
}     
#right {
  width: 150px; 
  margin-left: -150px;
  background-color: pink;
}    
#footer {
  clear: both;
}

标签:right,圣杯,width,布局,双飞翼,div,200px,margin,left
来源: https://blog.csdn.net/m0_51328823/article/details/122419358