介绍
三列布局指的是两边两列定宽,中间的宽度自适应,不同于圣杯布局和双飞翼,是三列布局的元素放置顺序是left,right,middle而不是middle优先加载。
且middle元素的宽度也不是设置成100%,而是auto(你没设置width默认是width:auto)
浮动法
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus庐">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
min-width: 600px;
}
.left,
.right {
background-color: aquamarine;
width: 200px;
height: 100px;
}
.minddle {
height: 100px;
background-color: rgb(190, 245, 245);
}
.left {
float: left;
}
.right {
float: right;
}
</style>
</head>
<body>
<div class="left">left</div>
<div class="right">right</div>
<div class="minddle">minddle</div>
</body>
</html>
定位法
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
min-width: 600px;
}
.box{
position: relative;
}
.left,
.right {
background-color: aquamarine;
width: 200px;
height: 100px;
}
.minddle {
height: 100px;
background-color: rgb(190, 245, 245);
/* 加上这个不然文字会被挤掉 */
padding: 0 200px;
}
.left {
position: absolute;
top: 0;
left: 0;
}
.right {
position: absolute;
top: 0;
right: 0;
}
</style>
</head>
<body>
<div class="box">
<div class="minddle">minddle</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
定位法和浮动法的区别
定位法的middle可以随意切换位置
浮动法的middle只能放在left和right后面