網頁佈局-左側固定，右側自適應

時間 2019-11-11

標籤網頁佈局左側固定右側自適應欄目 HTML 简体版

原文原文鏈接

在網頁佈局中，之前只考慮了兩列、三列的佈局方式，可是沒有過多的去考慮在兩列、三列布局的狀況下實現某些自適應的狀況；今天遇到這個問題，在這裏mark一下；css

方法一：左側元素浮動或者絕對定位的方式脫離文檔流，讓兩個塊級元素可以在同一行顯示。而後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>

效果：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>

效果：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。