高度已知，三栏布局，左右个300px，中间自适应
方法一：
效果图1
效果图2
效果图3
<!DOCTYPE html>
<html>
<head>
<title>浮动解决方案</title>
<style>
.layout article div {
min-height: 100px;
}
.layout .left {
float: left;
width: 300px;
background: red;
}
.layout .right {
float: right;
width: 300px;
background: blue;
}
.layout .center {
background: yellow;
}
</style>
</head>
<body>
<section class="layout float">
<article class="left-right-center">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<h1>浮动解决方案</h1>
</div>
</article>
</section>
</body>
</html>
浮动方法
缺点：清除浮动，脱离文档流，
优点：兼容性好
浮动的基本原理，遮挡，创建bfc
方法二：
效果图1
效果图2
效果图3
<!DOCTYPE html>
<html>
<head>
<title>绝对定位解决方法</title>
<style>
.layout .left-right-center>div {
min-height: 100px;
position: absolute;
}
.layout .left {
left: 0;
width: 300px;
background: red;
}
.layout .center {
left: 300px;
right: 300px;
background: yellow;
}
.layout .right {
right: 0;
width: 300px;
background: blue;
}
</style>
</head>
<body>
<section class="layout absolute">
<article class="left-right-center">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<h1>绝对定位解决方法</h1>
</div>
</article>
</section>
</body>
</html>
绝对定位
优点：快捷
缺点：子元素脱离文档流，可使用性差
方法三：
效果图1
效果图2
flexbox是让所有弹性盒模型对象的子元素都有相同的长度，且忽略它们内部的内容。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title></title>
<style>
.layout {
display: flex;
flex-direction: row;
min-height: 100px;
}
.layout .left {
width: 300px;
background: red;
}
.layout .center {
flex: 1;
background: yellow;
}
.layout .right {
width: 300px;
background: blue;
}
</style>
</head>
<body>
<section class="layout flex">
<div class="left"></div>
<div class="center">
<h>flex解决方案</h>
</div>
<div class="right"></div>
</section>
</body>
</html>
flex
优点：比较完美
可以实现中间高度不设定，自动增加高度
方法四：
效果图1
效果图2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title></title>
<style>
.layout article div{
min-height: 100px;
}
.layout .left-right-center {
width: 100%;
display: table;
height: 100px;
}
.layout .left-right-center>div {
display: table-cell;
}
.layout .left {
width: 300px;
background: red;
}
.layout .center {
background: yellow;
}
.layout .right {
width: 300px;
background: blue;
}
</style>
</head>
<body>
<section class="layout flex">
<article class="left-right-center">
<div class="left"></div>
<div class="center">
<h>table解决方案</h>
</div>
<div class="right"></div>
</article>
</section>
</body>
</html>
表格布局
优点：容易做到，兼容性好，pc兼容ie8，flex不适用，表格布局可以，
缺点：每个部分理解为单元格，高度超出时，两侧同时增高
可以实现中间高度不设定，自动增加高度
方法五：
效果图1
效果图2
效果图3
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title></title>
<style>
.layout article div{
min-height: 100px;
}
.layout .left-right-center {
display: grid;
width: 100%;
grid-template-rows: 100px;
grid-template-columns: 300px auto 300px;
}
.layout .left {
background: red;
}
.layout .center {
background: yellow;
}
.layout .right {
background: blue;
}
</style>
</head>
<body>
<section class="layout flex">
<article class="left-right-center">
<div class="left"></div>
<div class="center">
<h>grid网格布局解决方案</h>
</div>
<div class="right"></div>
</article>
</section>
</body>
</html>
网格布局
优点：新技术，css标准化，不用模拟做网格，代码量简化
网友评论