三栏布局特点：整体高度已知，左右两边宽度固定，中间内容宽度自适应。
浮动布局方案
这里使用了 less 语法，所以需要下载 less.min.js 文件，官网地址：https://less.bootcss.com/#，下同。
html 文件 >>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动布局</title>
<link href="./less/flexBox.less" rel="stylesheet/less" type="text/css">
<script src="./less.min.js" ></script>
</head>
<body>
<div class="floatBox">
<div class="left">left</div>
<div class="right">right</div>
<div class="main">center</div>
</div>
</body>
</html>
less 文件 >>
.floatBox{
text-align : center;
line-height: 100px;
.left {
width : 100px;
height : 100px;
background-color: #ddd;
float : left;
}
.right {
width : 100px;
height : 100px;
background-color: #ddd;
float : right;
}
.main {
height : 100px;
background: #ccc;
}
}
布局分析：
- 对两侧边栏子项设置固定宽度，设置浮动
- 对 main 栏子项不设置宽度，让其继承父盒子的宽度（不可设置为浮动，否则宽度由内容决定）
flex 布局方案
html 文件 >>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex 布局</title>
<link href="./less/flexBox.less" rel="stylesheet/less" type="text/css">
<script src="./less.min.js" ></script>
</head>
<body>
<div class="flexBox">
<div class="left">left</div>
<div class="main">center</div>
<div class="right">right</div>
</div>
</body>
</html>
less 文件 >>
.flexBox {
display : flex;
text-align : center;
line-height: 100px;
.left {
width : 100px;
height : 100px;
background-color: #ddd;
}
.right {
width : 100px;
height : 100px;
background-color: #ddd;
}
.main {
height : 100px;
background-color: #ccc;
flex : 1;
}
}
布局分析：
- 对父盒子设置 flex，开启弹性布局
- 对两侧边栏子项设置固定宽度，并且不设置 flex 的值
- 对 main 栏子项不设置宽度，并且设置 flex 的值
- 于是，main 栏继承了剩余可用宽度的 100%
圣杯布局方案
html 文件 >>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
<link href="./less/holyCupBox.less" rel="stylesheet/less" type="text/css">
<script src="./less.min.js" ></script>
</head>
<body>
<div class="holyCupBox">
<div class="left">left</div>
<div class="main">center</div>
<div class="right">right</div>
</div>
</body>
</html>
less 文件 >>
.holyCupBox {
margin : 0 100px;
text-align : center;
line-height: 100px;
.left {
width : 100px;
height : 100px;
background-color: #ddd;
float : left;
position : relative;
margin-right : -100px;
left : -100px;
}
.right {
width : 100px;
height : 100px;
background-color: #ddd;
float : left;
position : relative;
margin-left : -100px;
right : -100px;
}
.main {
width : 100%;
height : 100px;
background-color: #ccc;
float : left;
}
}
布局分析：
- 对父盒子设置左右外边距，作为两侧边栏的位置
- 对三栏区域（子盒子）设置浮动
- 对 left 栏设置相对定位和右外边距，然后左移、出父盒子范围，占据其左外边距位置
- 对 right 栏设置相对定位和左外边距，然后右移、出父盒子范围，占据其右外边距位置
- main 栏继承了父盒子的全部宽度
网友评论