关于三栏布局的五种方法及所遇到的各种问题及解决方法
根据慕课视频总结的笔记
页面的三栏布局一直是一个经典的问题，很多情况下的面试都会遇到这个问题。我一直以为这个很简单，但是在练习的过程中发现这个问题不亏是经典问题，考察了很多细节的知识点，我将贴出我的解法以及在解决过程中的问题。
1. 解法一：使用float来解决
代码如下：
<style>
*{
padding: 0;
margin:0;
}
.left{
background-color: pink;
width: 300px;
height:300px;
float:left;
}
.main{
background-color: red;
margin-left: 300px;
margin-right: 300px;
height:300px;
}
.right{
background-color: green;
float:right;
width: 300px;
height:300px;
}
</style>
</head>
<div class="mo">
<div class="left">left</div>
<div class="right">right</div>
<div class="main">main</div>
</div>
</body>
遇到的问题：
最开始的时候，我使用的DOM顺序如下图：
<div class="mo">
<div class="left">left</div>
<div class="main">main</div>
<div class="right">right</div>
</div>
在这种情况下，类为right的div总是会掉到下一行，即便每一行的宽度都是刚刚合适的。
对于该问题的解决：
我调整了DOM的顺序就没有任何问题了，这是为什么呢？因为left，right设置了浮动，就不会占有文本流，而main没有设置浮动就会独占一行。即如果先写main，再写right的话，right就会掉到下一行（因为main独占了上面一行）。
PS：这个问题真是没想到，考虑细节没考虑到，跪了。。。╮(╯﹏╰）╭
缺点：对于浮动问题，关键的就是清除浮动，如果处理不好，页面就会出现问题
优点：兼容性比较好
2. 解法二：使用position来定位
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0;
margin:0;
}
.left{
background-color: pink;
width: 300px;
height:300px;
position:absolute;
left:0;
}
.main{
background-color: red;
position: absolute;
left: 300px;
right:300px;
height:300px;
}
.right{
background-color: green;
width: 300px;
height:300px;
position:absolute;
right: 0;
}
.mo{
position: relative;
}
</style>
</head>
<body>
<div class="mo">
<div class="left">left</div>
<div class="main">main</div>
<div class="right">right</div>
</div>
</body>
</html>
用定位来解决就很开心了，这个方法只需要注意子绝父相就行了(～￣▽￣)～
缺点：注意脱标问题
优点：快捷
3.解法三：使用flexbox
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0;
margin:0;
}
.left{
background-color: pink;
width: 300px;
height:300px;
}
.main{
background-color: red;
height:300px;
flex:1;
}
.right{
background-color: green;
width: 300px;
height:300px;
}
.mo{
display: flex;
}
</style>
</head>
<body>
<div class="mo">
<div class="left">left</div>
<div class="main">main</div>
<div class="right">right</div>
</div>
</body>
</html>
缺点：IE8不支持，兼容性问题
优点：比较完美，移动端一般是使用这种
4.解法四：使用表格布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
.mo{
display: table;
width: 100%;
}
.left{
background-color: pink;
height:300px;
width: 300px;
display: table-cell;
}
.main{
background-color: red;
height:300px;
display: table-cell;
}
.right{
background-color: green;
height: 300px;
width: 300px;
display: table-cell;
}
</style>
</head>
<body>
<div class="mo">
<div class="left">left</div>
<div class="main">main</div>
<div class="right">right</div>
</div>
</body>
</html>
缺点：如果其中一个高度超出，其他的也会变化
优点：兼容性比较好
5.解法五：使用网格布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
.mo{
display: grid;
width: 100%;
grid-template-rows: 300px;
grid-template-columns: 300px auto 300px;
}
.left{
background-color: pink;
}
.main{
background-color: red;
}
.right{
background-color: green;
}
</style>
</head>
<body>
<div class="mo">
<div class="left">left</div>
<div class="main">main</div>
<div class="right">right</div>
</div>
</body>
</html>
优点：代码量较少
延伸：如果去除已知高度的话，对代码如果不进行改变的话，只有flex布局和表格布局可以继续使用
532
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
