一、浮动
原理：left和right放在center前，并分别左右浮动，center是块级元素宽度会自动撑开
<!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>Document</title>
<style>
.left,
.right,
.center {
min-height: 100px;
}
.left {
background-color: red;
width: 200px;
float: left;
}
.right {
background-color: blue;
width: 200px;
float: right;
}
.center {
background-color: orange;
width: 100%;
}
</style>
</head>
<body>
<aside class="left"></aside>
<aside class="right"></aside>
<main class="center">
<h1>浮动解决方案</h1>
<p>方法：left和right写在center前面，并且分别左右浮动；</p>
<p>
中间的这个div因为是块级元素，所以在水平方向上按照他的包容块自动撑开。
</p>
<p>简单，但是中心部分过长下面会溢出，然后文字就会跑到两边去。</p>
</main>
</body>
</html>
二、绝对定位
原理： 通过position:absolute来确定三个div的位置
<!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;
}
aside {
position: absolute;
width: 300px;
min-height: 100px;
}
aside.left {
left: 0;
background-color: red;
}
aside.right {
right: 0;
background-color: blue;
}
main.center {
position: absolute;
left: 300px;
right: 300px;
background-color: orange;
}
</style>
</head>
<body>
<aside class="left"></aside>
<aside class="right"></aside>
<main class="center">
<h1>绝对定位解决方案</h1>
<p>左右区域分别postion：absolute，固定到左右两边</p>
<p>中间区域postion：absolute；left：300px; right: 300px</p>
<p>给总的宽度加一个min-width，不然缩小窗口会有毛病</p>
</main>
</body>
</html>
三、 flex
原理： 父元素display: flex; 中间的元素flex: 1;
<!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>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.left,
.right,
.center {
min-height: 100px;
}
.wrapper {
display: flex;
}
.left{
background-color: red;
width: 300px;
}
.center {
background-color: orange;
flex: 1;
}
.right {
background-color: blue;
width: 300px;
}
</style>
</head>
<body>
<div class="wrapper">
<aside class="left"></aside>
<main class="center">
<h1>flex布局解决方案</h1>
<p>包裹这个3个块的父元素display: flex; 中间的元素flex: 1;</p>
</main>
<aside class="right"></aside>
</div>
</body>
</html>
四、table
原理：父元素display: table;并且宽度为100%;子元素display:table-cell;左右两侧加宽度，中间无宽度
<!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;
}
.wrapper {
display: table;
width: 100%;
}
.left,
.right,
.center {
min-height: 100px;
display: table-cell;
}
.left {
width: 300px;
background-color: red;
}
.center {
background-color: orange;
}
.right {
background-color: blue;
width: 300px;
}
</style>
</head>
<body>
<div class="wrapper">
<aside class="left"></aside>
<main class="center">
<h1>表格布局</h1>
<p>父元素display: table;并且宽度为100%</p>
<p>每一个子元素display: table-cell; </p>
<p>左右两侧添加宽度，中间不加宽度</p>
</main>
<aside class="right"></aside>
</div>
</body>
</html>
五、圣杯布局
原理：利用相对定位、浮动布局与负边距布局，不用额外标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>实现三栏水平布局之圣杯布局</title>
<style type="text/css">
/*基本样式*/
.left, .right, .main {
min-height: 300px;
}
.left {
width: 200px;
background-color:thistle;
}
.main {
background-color: #999;
}
.right {
width: 300px;
background-color: violet;
}
/* 圣杯布局关键代码 */
.left, .main, .right {
float: left;
position: relative;
}
.main {
width: 100%;
}
.container {
padding-left: 200px;
padding-right: 300px;
}
.right {
margin-left: -300px;
right: -300px;
}
.left {
margin-left: -100%;
left: -200px;
}
</style>
</head>
<body>
<div class="container">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
代码解析：
main部分首先要放在container的最前部分。然后是left,right
1.将三者都 float:left , 再加上一个position:relative (因为相对定位后面会用到）
2.main部分 width:100%占满
3.此时main占满了，所以要把left拉到最左边，使用margin-left:-100%
4.这时left拉回来了，但会覆盖main内容的左端，要把main内容拉出来，所以在外围container加上 padding:0 220px 0 200px
5.main内容拉回来了，right也跟着过来了，所以要还原，就对left使用相对定位 left:-200px 同理，right也要相对定位还原 right:-220px
6.到这里大概就自适应好了。如果想container高度保持一致可以给left main right都加上min-height:130px
六、双飞翼布局
原理：主体元素上设置左右边距，预留两翼位置。左右两栏使用浮动和负边距归位。
<!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>
.left,
.right,
.main {
min-height: 200px;
}
.left {
width: 200px;
background-color: thistle;
}
.main {
background: #999;
}
.right {
width: 300px;
background-color: violet;
}
/* 双飞翼布局重点 */
.left,
.main,
.right {
float: left;
}
.main {
width: 100%;
}
.main-inner {
margin-left: 200px;
margin-right: 300px;
}
.left {
margin-left: -100%;
}
.right {
margin-left: -300px;
}
</style>
</head>
<body>
<div class="main"><div class="main-inner">中心区</div></div>
<div class="left">left</div>
<div class="right">right</div>
</body>
</html>
代码解析：
左翅left有200px,右翅right:300px.，身体main自适应未知
1.html代码中，main要放最前边，left right
2.将main left right 都float:left
3.将main占满 width:100%
4.此时main占满了（left和right被挤到第二行），所以要把left拉到最左边，使用margin-left:-100% 同理 right使用margin-left:-300px
（这时可以直接继续上边圣杯布局的步骤，也可以有所改动）
5.main内容被覆盖了吧，除了使用外围的padding，还可以考虑使用margin。
给main增加一个内层div-- main-inner, 然后margin:0 300px 0 200px
圣杯和双飞翼都可以实现三栏布局，前几步都是类似的，要将main写在left和right前面，并且main left right都设置float:left。做完这两步left和right就被挤下去了。圣杯和双飞翼的差别就在于如何把left和right拉回来并且不会覆盖main的内容。
如何把left和right拉回来？
margin-left：-100%或者margin-left:-300px
双飞翼给main里面添加了div标签，通过margin:0 300px 0 200px预留出左右的宽度，这样把left和right拉回来就不会覆盖住main的内容。
而圣杯布局并不需要额外添加标签。main通过padding:0 300px 0 200px预留出了左右两边的距离，但此时把left和right拉回来的话，它还是会覆盖住main的内容，所以利用position:relative，将left和right定位到页面的两端
网友评论