双栏布局
双栏布局非常常见，往往是以一个定宽栏和一个自适应的栏并排展示存在
浮动布局
实现思路也非常的简单：
- 使用 float 左浮左边栏
- 右边模块使用 margin-left 撑出内容块做内容展示
- 为父级元素添加BFC，防止上方内容飞到下方元素
代码效果
没有使用bfc
使用了bfc
代码
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
.box {
overflow: hidden;/* 父级元素添加BFC */
}
.left {
float: left;
width: 200px;
background-color: gray;
height: 400px;
}
.right {
margin-left: 210px;
background-color: lightgray;
height: 200px;
}
</style>
</head>
<body>
<div class="box">
<div class="left">
左边左边左边左边左边左边左边左边左边左边左边左边左边左左边左边左边左边左左边左边左边左边左左边左边左边左边左左边左边左边左边左左边左边左..........
</div>
<div class="right">
右边右边右边右边右边右边右边右边右边右边右边右边边右边右边右边右右边右边右边右边右边右边右边右边边右边右边右边右右边右边右边右..........
</div>
</div>
</body>
</html>
flex布局
代码效果
代码
<style>
.box {
display: flex;
}
.left {
width: 200px;
background-color: gray;
}
.right {
background-color: lightgray;
flex: 1;
}
</style>
<div class="box">
<div class="left">左边左边左边左边左边左边左边左边左边左边</div>
<div class="right">右边右边右边右边右边右边右边右边右边</div>
</div>
三栏布局
两边float中间margin
代码效果
代码
关键代码
<style>
.wrap {
background: #eee;
overflow: hidden;
padding: 20px;
height: 200px;
}
.left {
width: 200px;
height: 200px;
float: left;
background: coral;
}
.right {
width: 120px;
height: 200px;
float: right;
background: lightblue;
}
.middle {
margin-left: 220px;
height: 200px;
background: lightpink;
margin-right: 140px;
}
</style>
<div class="wrap">
<div class="left">左侧</div>
<div class="right">右侧</div>
<div class="middle">中间</div>
</div>
flex布局
代码效果
代码
<style type="text/css">
.wrap {
display: flex;
justify-content: space-between;
}
.left,
.right,
.middle {
height: 100px;
}
.left {
width: 200px;
background: coral;
}
.right {
width: 120px;
background: lightblue;
}
.middle {
background: #555;
width: 100%;
margin: 0 20px;
}
</style>
<div class="wrap">
<div class="left">左侧</div>
<div class="middle">中间</div>
<div class="right">右侧</div>
</div>
