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

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

?

轉載于:https://www.cnblogs.com/tracy-ling/p/10039964.html

總結

以上是生活随笔為你收集整理的布局 —— 左侧固定，右侧自适应的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。