圣杯布局和双飞翼布局

xiaoxiao无脸男

已于 2022-11-17 10:43:51 修改

阅读量546

点赞数

分类专栏： CSS 文章标签： CSS 圣杯布局双飞翼布局

于 2018-03-27 15:11:51 首次发布

本文链接：https://blog.csdn.net/xiaoxiaoluckylucky/article/details/79713542

版权

CSS 专栏收录该内容

6 篇文章

订阅专栏

圣杯布局

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>圣杯布局</title>
<style type="text/css">
*{margin: 0;padding: 0;}
body{min-width: 700px;}
/* 2.设置container的样式 */
.container {
padding: 0 220px 0 200px;
}
/* 3.设置middle left right的公用样式 */
.middle,.left,.right{
float:left;
position:relative;
min-height:150px;
}
/* 4.设置middle的样式 */
.middle{
width:100%;
background:blue;
}
/* 5.设置left的样式 */
.left{
width:200px;
background:red;
left:-200px;
margin-left:-100%;
}
/* 6.设置right的样式 */
.right{
width:220px;
background:green;
right:-220px;
margin-left:-220px;
}

</style>
</head>
<body>
<!-- 1.布局 顺序是middle left right -->
     <div class="container">
<div class="middle"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>

双飞翼布局

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>双飞翼布局</title>
<style>
* {
margin: 0;
padding: 0;
}

/* 2.设置main sub extra的共有样式 */

.main,
.sub,
.extra {
float: left;
min-height: 150px;
}

/* 3.设置main和main-inner的样式 */

.main {
width: 100%;
}

.main-inner {
background: blue;
margin-left: 200px;
margin-right: 220px;
min-height: 150px;
}

/* 4.设置sub的样式 */

.sub {
width: 200px;
background: red;
margin-left: -100%;
}

/* 5.设置extra的样式 */

.extra {
width: 220px;
background: green;
margin-left: -220px;
}
</style>
</head>

<body>
<!-- 1.布局顺序 main sub extra -->
<div class="main">
<div class="main-inner"></div>
</div>
<div class="sub"></div>
<div class="extra"></div>
</body>

</html>

区别：

1.圣杯布局比较简单，中左右；双飞翼布局，与圣杯布局比较，在中元素外面添加了一个div。

2.圣杯布局，当中元素的宽度比左元素的宽度小时，会变形。双飞翼布局不存在此问题。