本文对可以实现三栏布局的方法进行了整理
左右固定宽度，中间自适应(5种方法)
1.float方法
2.absolute方法
3.flexbox方法
4.table方法
5.grid方法
image.png
<html>
<head>
<meta charset="utf-8">
<title>css布局全解</title>
<style type="text/css">
html *{
padding: 0;
margin: 0
}
.layout article div{
min-height: 50px;
}
.layout{
margin-top: 10px;
}
</style>
</head>
<body>
<!-- 1.float 方法-->
<section class="layout float">
<style media="screen">
.layout.float .right{
float: right;
width: 300px;
background: red;
}
.layout.float .left{
float: left;
width: 300px;
background: blue;
}
.layout.float .center{
background: yellow;
}
</style>
<article class="left-right-center">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<h1>浮动解决方案</h1>
</div>
</article>
</section>
<!-- 2.绝对定位写法 -->
<section class="layout absolute">
<style>
.layout.absolute .left-center-right div{
position: absolute;
}
.layout.absolute .left{
width: 300px;
left: 0;
background: blue;
}
.layout.absolute .center{
left: 300px;
right: 300px;
background: yellow;
}
.layout.absolute .right{
width: 300px;
right: 0px;
background: red;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h1>绝对定位解决方案</h1>
</div>
<div class="right"></div>
</article>
</section>
<!-- 3.flex布局 -->
<section class="layout flexbox">
<style>
.layout.flexbox{
margin-top: 70px;
}
.layout.flexbox .left-center-right{
display: flex;
}
.layout.flexbox .left{
width: 300px;
background: blue;
}
.layout.flexbox .center{
flex:1;
background: yellow;
}
.layout.flexbox .right{
width: 300px;
background: red;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h1>flex定位解决方案</h1>
</div>
<div class="right"></div>
</article>
</section>
<!-- 4.表格布局 -->
<section class="layout table">
<style>
.layout.table .left-center-right{
display: table;
width: 100%;
height: 50px;
}
.layout.table .left-center-right div{
display: table-cell;
}
.layout.table .left{
width: 300px;
background: blue;
}
.layout.table .center{
background: yellow;
}
.layout.table .right{
width: 300px;
background: red;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h1>表格定位解决方案</h1>
</div>
<div class="right"></div>
</article>
</section>
<!--5.网格布局 -->
<section class="layout grid">
<style>
.layout.grid .left-center-right{
display: grid;
width: 100%;
grid-template-rows: 50px;
grid-template-columns: 300px auto 300px;
}
.layout.grid .left{
background: blue;
}
.layout.grid .center{
background: yellow;
}
.layout.grid .right{
background: red;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h1>网格定位解决方案</h1>
</div>
<div class="right"></div>
</article>
</section>
</body>
</html>
上下固定高度，中间自适应(4种方法)
1.absolute方法
2.flexbox方法
3.table方法
4.grid方法
image.png
<html>
<head>
<meta charset="utf-8">
<title>css上下高度不变，中间自适应布局</title>
<style type="text/css">
html *{
padding: 0;
margin: 0;
}
#wrapper div{
width: 150px;
}
#wrapper div.one,.two,.three,.four{
width: 150px;
height: 100%;
display: inline-block;
float: left;
}
.one,.two,.three{
background: green;
}
</style>
</head>
<body>
<div id="wrapper">
<!-- 1.absolute方法 -->
<div class="one">
<style type="text/css">
.layout.absolute div{
position: absolute;
float: left;
}
.layout.absolute .top{
top: 0;
height: 100px;
background: red;
}
.layout.absolute .bottom{
bottom: 0;
height: 100px;
background: blue;
float: left;
}
.layout.absolute .center{
top: 100px;
bottom: 100px;
background: yellow;
overflow: auto;
}
</style>
<article class="layout absolute">
<div class="top"></div>
<div class="center">
<h1>absolute中间自适应元素</h1>
</div>
<div class="bottom"></div>
</article>
</div>
<!-- 2.flex方法 -->
<div class="two">
<style type="text/css">
.two{
margin-left:10px;
}
.layout.flexbox{
display: flex;
width: 100%;
height: 100%;
flex-direction:column;
}
.layout.flexbox .top{
height: 100px;
background: red;
}
.layout.flexbox .center{
flex:1;
background: yellow;
}
.layout.flexbox .bottom{
height: 100px;
background: blue;
}
</style>
<article class="layout flexbox">
<div class="top"></div>
<div class="center">
<h1>flexbox中间自适应元素</h1>
</div>
<div class="bottom"></div>
</article>
</div>
<!-- 3.表格方法 -->
<div class="three">
<style type="text/css">
.three{
margin-left: 10px;
}
.layout.table{
display: table;
height: 100%;
width: 100%;
}
.layout.table div{
display: table-row;
/*特别注意*/
display: inline-block;
}
.layout.table .top{
height: 100px;
background: red;
}
.layout.table .center{
height:calc(100% - 200px);
background: yellow;
}
.layout.table .bottom{
height: 100px;
background: blue;
}
</style>
<article class="layout table">
<div class="top"></div>
<div class="center">
<h1>table方法中间自适应元素</h1>
</div>
<div class="bottom"></div>
</article>
</div>
<!-- 4.grid方法 -->
<div class="four">
<style>
.four{
margin-left: 10px;
}
.layout.grid{
display: grid;
height: 100%;
grid-template-rows: 100px auto 100px;
grid-template-columns: 150px;
}
.layout.grid .top{
background: red;
}
.layout.grid .center{
background: yellow;
}
.layout.grid .bottom{
background: blue;
}
</style>
<article class="layout grid">
<div class="top"></div>
<div class="center">
<h1>grid方法中间自适应元素</h1>
</div>
<div class="bottom"></div>
</article>
</div>
</div>
</body>
</html>
看似简单的题目，还是要多练习增加熟练度。
