CSS布局应该说是页面开发中最基本的，常见的有两列布局、三列布局等。
如要实现一个两列布局（高度固定），左侧固定宽度（300px），右侧自适应，通常想到的方法是浮动和绝对定位，这也是我想到的第一方案，那还有没有其他方案呢？在此总结5种布局方案。
1.浮动方案
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????.layout ?div{ ???????????height: 100px; ???????} ???????/*浮动方式*/ ???????.left{ ???????????float: left; ???????????width: 300px; ???????????background-color: red; ???????} ???????.right{ ???????????margin-left: 300px; ???????????background-color: blue; ???????} ???</style></head><body><section class="layout"> ????<div class="left"></div> ????<div class="right"><h1>浮动解决方案</h1></div></section></body></html>2.绝对定位方案
<style> ???????/*绝对定位方式*/ ???????.layout > div{ ???????????position: absolute; ???????????height:100px; ???????} ???????.left{ ???????????left: 0; ???????????width: 300px; ???????????background-color: red; ???????} ???????.right{ ???????????left: 300px; ???????????background-color: blue; ???????????right: 0; ???????}
</style><section class="layout"> ????<div class="left"></div> ????<div class="right"><h1>绝对定位解决方案</h1></div></section> ???????3.table方式布局
<style> ???????/*table方式*/
.layout{
???display: table;
???width: 100%;
}
.layout >div{
???display: table-cell;
???height:100px;
}
.left{
???width: 300px;
???background-color: red;
}
.right{
???background-color: blue;
}</style>
<section class="layout">
<div class="left"></div>
<div class="right">
<h1>table解决方案</h1>
</div>
</section>
4.flex布局
/*flex布局*/ ???????.layout{ ???????????display: flex; ???????} ???????.layout>div{ ???????????height:100px; ???????} ???????.left{ ???????????width: 300px; ???????????background-color: red; ???????} ???????.right{ ???????????flex:1; ???????????background-color: blue; ???????} ???????<section class="layout"> ???????????<div class="left"></div> ???????????<div class="right"><h1>flex解决方案</h1></div> ???????</section>5.grid布局
/*grid布局*/ ???????.layout{ ???????????display: grid; ???????????width:100%; ???????????grid-template-rows: 100px; ???????????grid-template-columns: 300px auto; ???????} ???????.left{ ???????????background-color: red; ???????} ???????.right{ ???????????background-color: blue; ???????}<section class="layout"> ???????<div class="left"></div> ???????<div class="right"> <h1>网格布局定位解决方案</h1></div></section>css布局
原文地址：https://www.cnblogs.com/jingmi-coding/p/8900488.html