<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>頁面配置</title> <style> * { margin: 0; padding: 0; } .layout{ margin: 20px; } .layout article p{ min-height: 100px; } </style></head><body> <!-- 浮動解決方案 --> <section class="layout float"> <style> .layout.float .left{ float: left; width: 300px; background: red; } .layout.float .right{ float: right; width: 300px; background: blue; } .layout.float .center{ background: yellow; } </style> <article class="left-right-center"> <p class="left"></p> <p class="right"></p> <p class="center"> <h1>浮動解決方案</h1> 1.這是三欄布局中間部分 1.這是三欄布局中間部分 </p> </article> </section></body></html>
注意：最要注意的一點是，中間列一定要放在左右兩列的後面！！！
2.使用絕對位置布局
優點：布局相對迅速
缺點：定位的元素脫離了文檔流，意味著其子項目也要脫離文檔流，所以這種方式的可使用性比較差
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>頁面配置</title> <style> * { margin: 0; padding: 0; } .layout{ margin: 20px; } .layout article p{ min-height: 100px; } </style></head><body><!-- 絕對位置解決方案 --> <section class="layout absolute"> <style> .layout.absolute .left-right-center{ position: relative; } .layout.absolute .left{ position: absolute; left: 0; width: 300px; background: red; } .layout.absolute .right{ position: absolute; right: 0; width: 300px; background: blue; } .layout.absolute .center{ position: absolute; left: 300px; right: 300px; background: yellow; } </style> <article class="left-right-center"> <p class="left"></p> <p class="center"> <h2>絕對位置解決方案</h2> 1.這是三欄布局絕對位置解決方案 1.這是三欄布局絕對位置解決方案 </p> <p class="right"></p> </article> </section></body></html>
3.使用flex布局
優點： 很好的解決了浮動和絕對位置的缺點，現在移動端基本都是用flex布局
ie8以下 不支援flex
<section class="layout flex"> <style> .layout.flex .left-right-center{ display: flex; margin-top: 140px; } .layout.flex .left{ flex: 0 0 300px; width: 300px; background: red; } .layout.flex .right{ flex: 0 0 300px; width: 300px; background: blue; } .layout.flex .center{ flex: 1; background: yellow; } </style> <article class="left-right-center"> <p class="left"></p> <p class="center"> <h2>Flexbox解決方案</h2> 1.這是三欄布局flexbox解決方案 1.這是三欄布局flexbox解決方 </p> <p class="right"></p> </article> </section>
注意： 中間列要放在中間！！！
4.使用表格版面配置
優點：相容性還不錯
缺點：其中一欄內容高度增加，另外兩欄的高度也會增加，有時我們並不需要他們同時增高；不利於搜尋引擎抓取資訊；
<!-- 表格版面配置解決方案 --><section class="layout table"><style>.layout.table .left-right-center{width: 100%;display: table;height: 100px;}.layout.table .left{display: table-cell;width: 300px;background: red;}.layout.table .right{display: table-cell;width: 300px;background: blue;}.layout.table .center{display: table-cell;background: yellow;}</style><article class="left-right-center"><p class="left"></p><p class="center"><h2>表格版面配置解決方案</h2>1.這是三欄表格版面配置布局解決方案1.這是三欄表格版面配置布局解決方案</p><p class="right"></p></article></section>
5.網格布局
<!-- 網格布局解決方案 --><section class="layout grid"><style>.layout.grid .left-right-center{width: 100%;display: grid;grid-template-rows: 100px;grid-template-columns: 300px auto 300px;}.layout.grid .left{background: red;}.layout.grid .right{background: blue;}.layout.grid .center{background: yellow;}</style><article class="left-right-center"><p class="left"></p><p class="center"><h2>網格布局解決方案</h2>1.這是三欄布局網格布局解決方案1.這是三欄布局網格布局解決方案</p><p class="right"></p></article></section>
假如把高度已知去掉或者高度超出
1.flex布局高度可以自適應
2.表格版面配置奧杜可以自適應
3.浮動，絕對位置，網格布局不能自適應高度
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
