布局 —— 左侧固定，右侧自适应

实现布局：左侧固定，右侧自适应

一. flex布局

html：

<div class="content"><div class="left"></div><div class="right"></div>
</div>

 

css：

.content {width: 100%;display: flex;
}
.left {width: 200px;height: 500px;background: #e1e1e1;
}
.right {flex: 1;height: 500px;background: #666;
}

二. 

html同上

css：

.content {width: 100%;
}
.left {width: 200px;height: 500px;background: #e1e1e1;float: left;
}
.right {height: 500px;background: #666;
}

 

三. 类似圣杯布局

html同上

css：

.content {padding-left: 200px;
}
.left {width: 200px;height: 500px;background: #e1e1e1;float: left;margin-left: -200px;}
.right {width: 100%;height: 500px;background: #666;
}

 

四. 类似双飞翼布局

html:

<div class="main"><div class="right"></div>
</div>
<div class="left"></div>

css：

.main {float: left;width: 100%;
}
.right {height: 500px;background: #666;margin-left: 200px;
}
.left {width: 200px;height: 500px;background: #e1e1e1;float: left;margin-left: -100%;
}