兩列布局之左邊固定寬度，右邊自適應（絕對定位實現方法）

咱們常常看到這樣的佈局方式：左邊的側邊欄寬度固定，右邊的主要內容區域寬度自適應變化。如今提供一個css佈局方式。

html代碼：

<div class="row">
　　<div class="side">
　　　　<img src="side.png" alt="order">
　　　　<p>In restaurants, pizza can be baked in an oven with stone bricks above the heat source, an electric deck oven, a conveyor belt oven or a wood- or coal-fired brick oven.</p>
　　　　<button>Order</button>
　　</div>
　　<div class="main">
　　　　<img src="pizza.png" alt="pizza">
　　　　<h1>Pizza</h1>
　　　　<p>Various types of ovens are used to cook them and many varieties exist.</p>
　　</div>　　
</div>

css代碼：

* {
　　margin: 0;
　　padding: 0;
　　box-sizing: border-box;
}
.row {
　　position: relative;
　　width: 100%;
　　background: #000;
}

佈局採用的思路是：左邊side列採用絕對定位，脫離文檔流，右邊的main列寬度100%，會天然地頂上來。可是咱們看到的場景是side列浮在main列的上方。這時候經過設置main列的padding-left = side列的寬度實現內容不相互遮擋。

.side {
　　position: absolute;/*脫離文檔流，讓右側能頂上來*/
　　top: 0;
　　left: 0;
　　width: 300px;
　　height: 500px;
　　background: #C0392B;
}
.main {
　　width: 100%;
　　height: 500px;
　　background: #E74C3C;
　　padding-left: 300px;/*左側的寬度*/
}