標籤：meta body style oat osi auto blog 測試 com
在網頁布局中，以前只考慮了兩列、三列的布局方式，但是沒有過多的去考慮在兩列、三列布局的情況下實現某些自適應的情況；今天遇到這個問題，在這裡mark一下；
方法一：左側元素浮動或者絕對位置的方式脫離文檔流，讓兩個區塊層級元素能夠在同一行顯示。然後margin-left的值設定為左側元素的寬度；在這裡利用了div的一個預設規則，div沒有設定寬度的情況下會繼承父元素的寬度；如果用p等其他標籤達不到此效果；<!doctype html><html><head><meta charset="utf-8"><title>無標題文檔</title></head><style type="text/css">.box1{float: left;width: 300px;height: 150px;background: red;}.box2{margin-left: 300px;background: blue;height: 150px;}</style><body><div class="box1"></div><div class="box2"></div></body></html>
：
方法二：利用BFC（塊級格式化上下文）來防止蚊子環繞的原理來實現；BFC就是一個相對獨立的布局環境，它內部元素的布局不受外面布局的影響，它可以通過多種方式來建立：1.float不為none；2.position不為static或者relative；3.display為table-cell，table-caption，inline-block，flex或者inline-flex中的其中一個都可；4.overflow不為visible； 關於BFC，W3C等資料是這樣描述的：在BFC中，每個盒子的左外邊框緊挨著包含塊的左邊框（從右至左的格式化時，則為右邊框緊挨）。即使在浮動裡也是這樣的（儘管一個包含塊的邊框會因為浮動而萎縮），除非這個包含塊的內部建立了一個新的BFC。這樣，當我們給右側的元素單獨建立一個BFC時，它將不會緊貼在包含塊的左邊框，而是緊貼在左邊框的右邊框；
<!doctype html><html><head><meta charset="utf-8"><title>無標題文檔</title></head><style type="text/css">.box1{float: left;width: 300px;height: 150px;background: red;}.box2{background: yellow;height: 150px;overflow: auto;}</style><body><div class="box1"></div><div class="box2"></div></body></html>
效果：
註：在測試過程中遇到一個問題，去掉box2的overflow：auto；屬性，右側的div也能達到自適應的效果。自適應的盒子是否需要在設定BFC還有待更一步確認； 方法三：利用display:table;的方式實現；父元素設定display:table;寬度100%，左右盒子設定display:table-cell;，左側固定的盒子設定寬高，右側自適應的盒子設定高度即可；
<!doctype html><html><head><meta charset="utf-8"><title>無標題文檔</title></head><style type="text/css">.box{display: table;width: 100%;}.box1{width: 300px;height: 150px;background: red;display: table-cell;}.box2{background: green;height: 150px;display: table-cell;}</style><body><div class="box"><div class="box1"></div><div class="box2"></div></div></body></html>
效果：
網頁布局-左側固定，右側自適應
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
