布局 —— 左側固定，右側自適應

實現布局：左側固定，右側自適應

一. 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%;
}

?