标签：temp 一个 nbsp red tab 解决方案 utf-8 template span
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>
标签：temp 一个 nbsp red tab 解决方案 utf-8 template span
原文地址：https://www.cnblogs.com/jingmi-coding/p/8900488.html
