两列布局之左边固定宽度，右边自适应（绝对定位实现方法）

我们经常看到这样的布局方式：左边的侧边栏宽度固定，右边的主要内容区域宽度自适应变化。现在提供一个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;/*左侧的宽度*/
}

转载于:https://www.cnblogs.com/lssthinkingontheway/p/7775240.html