一、问题:假设高度默认100px ,请写出三栏布局,其中左栏、右栏各为300px,中间自适应。
(1)方法1、浮动:
左侧设置左浮动,右侧设置右浮动即可,中间会自动地自适应。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>左右固定中间自适应</title>
<style>
*{
margin: 0;
padding: 0;
}
.contain div{
height: 100px;
}
#div1{
float: left;
width: 300px;
background: #fff000;
}
#div3{
float: right;
width: 300px;
background: #ff0000;
}
#div2{
background: #00ffff;
}
</style>
</head>
<body>
<div class="contain">
<div id="div1">左</div>
<div id="div3">右</div>
<div id="div2">中间</div>
</div>
</body>
</html>
上面的一定注意,结构部分,顺序是左右中,否则如果你左中右的话,右浮动也上不去,因为有中块级元素在那独占一行
(2).方法2、绝对定位:
左侧设置为绝对定位, left:0px。右侧设置为绝对定位, right:0px。中间设置为绝对定位,left 和right 都为300px,即可。中间的宽度会自适应。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定位</title>
<style>
*{
margin: 0;
padding: 0;
}
.contain div{
height: 100px;
position: absolute;
}
#div1{
left: 0px;
width: 300px;
background: #fff000;
}
#div3{
right: 0px;
width: 300px;
background: #ff0000;
}
#div2{
left: 300px;
right: 300px;
background: #00ffff;
}
</style>
</head>
<body>
<div class="contain">
<div id="div1">左</div>
<div id="div3">右</div>
<div id="div2">中间</div>
</div>
</body>
</html>
(3)方法3、flexbox布局
给左中右所在的父元素设置为display: flex,设置两侧的宽度后,然后让中间的份数为1,flex = 1,即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.contain {
display: flex;
}
.contain div{
height: 100px;
}
#div1{
width: 300px;
background: #fff000;
}
#div3{
width: 300px;
background: #ff0000;
}
#div2{
flex: 1;
background: #00ffff;
}
</style>
</head>
<body>
<div class="contain">
<div id="div1">左</div>
<div id="div2">中间</div>
<div id="div3">右</div>
</div>
</body>
</html>
上面那个结构顺序就是左中右了
(4)方法4、网格布局 grid
设置容器为网格布局,宽度为100% ,设置网格为三列,并设置每列的宽度。即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网格布局</title>
<style>
*{
margin: 0;
padding: 0;
}
.contain {
display: grid;
width: 100%;
grid-template-rows: 100px;
grid-template-columns: 300px auto 300px;
}
#div1{
background: #fff000;
}
#div3{
background: #ff0000;
}
#div2{
background: #00ffff;
}
</style>
</head>
<body>
<div class="contain">
<div id="div1">左</div>
<div id="div2">中间</div>
<div id="div3">右</div>
</div>
</body>
</html>
二、四种方法的对比
a. 4种方法的优缺点,兼容性问题:实际开发中,哪个最实用?
(1)方法1 浮动
优点:兼容性好。
缺点:浮动会脱离标准文档流,因此要清除浮动。我们解决好这个问题即可。
(2)方法:2:绝对定位
优点:快捷。
缺点:导致子元素也脱离了标准文档流,可实用性差。
(3)方法3:flex 布局(CSS3中出现的)
- ####优点:解决上面两个方法的不足,flex布局比较完美。移动端基本用 flex布局。
(4)方法4:网格布局
- ####优点:CSS3中引入的布局,很好用。代码量简化了很多。
b.延伸:如果题目中去掉高度已知
问题:题目中,如果去掉高度已知,我们往中间的模块里塞很多内容,让中间的模块撑开。会发生什么变化?哪个布局就不能用了?
答案是:flex 布局可以通用,其他三个布局都不能用了。
以上代码,天下我全都用div做的,没有考虑语义化,如果你追求完美,那么可以把父容器换成article标签