网页布局之双飞翼布局

最新推荐文章于 2022-07-13 18:48:30 发布

JavaFeel

最新推荐文章于 2022-07-13 18:48:30 发布

阅读量356

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML5

本文链接：https://blog.youkuaiyun.com/qq_21007229/article/details/90543585

HTML5 专栏收录该内容

3 篇文章

订阅专栏

博客介绍了双飞翼布局和圣杯布局有相似处，重点阐述双飞翼布局特点，它不使用display定位，结构上仅将center用div包裹，通过margin留出左右侧边栏距离，且结构设置更简单。

双飞翼布局和圣杯布局有很多相识之处，区别在于双飞翼布局不使用display定位，结构层面上只将center用div包裹，以margin留出左右侧边栏的距离。

<body>
			<div id="header">header</div>
			<div id="container">
			<div id="main" class="column">
   			<div id="center">center</div>
  			</div>
  			<div id="left" class="column">left</div>
  			<div id="right" class="column">right</div>
  			</div>
			<div id="footer">footer</div>
	</body>

CSS代码如下：

html,body,div{
	margin:0;
	padding:0;
}
body{
	height:700px;
}
#header,#footer{
	width:100%;
	height:15%;
	background-color:green;
}
#main {
  width: 100%;
}
.column {
  float: left;
  height:70%;
}

#center {
  margin-left: 200px;
  margin-right: 200px;
  background-color:#eee;
}

#left {
  width: 200px; 
  margin-left: -100%;
  background-color:red;
}
#right {
  width: 200px; 
  margin-left: -200px;
  background-color:blue;
}
#footer {
  clear: both;
}

可以看到，双飞翼布局中结构的设置不需使用display定位，因此也更为简单。