CSS三栏自适应布局，左中右，上中下
生活随笔
收集整理的這篇文章主要介紹了
CSS三栏自适应布局，左中右，上中下
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
本文對可以實現三欄布局的方法進行了整理
左右固定寬度，中間自適應(5種方法)
1.float方法 2.absolute方法 3.flexbox方法 4.table方法 5.grid方法
<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方法
<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> 復制代碼看似簡單的題目，還是要多練習增加熟練度。
總結
以上是生活随笔為你收集整理的CSS三栏自适应布局，左中右，上中下的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： laravel模型中设计使用单选按钮的方
- 下一篇： CSS 基本样式