關於css常見4種左邊固定，右邊自適應的布局

在我們開發或者面試中常常聽到面試官問到這個問題，那麼小夥伴們如何解答呢。

html代碼：

  <div class='aside'></div>

<div class='content'></div>

一，通過margin來設定：

css代碼：

. aside { width : 210 px ; height : 400 px ; background-color : forestgreen ; float : left ; } . content { height : 400 px ; margin-left : 210 px ; background-color : orange ;
}

二：通過觸發btc實現

css代碼：

.aside{ width: 200px; height: 200px; background-color: red; float: left; } .content{ overflow: hidden; height: 200px; background-color: blue

三：通過flex布局：

這裡不詳細敘述，關於flex布局可以參見阮一峰的flex布局教程:flex布局教程

四：通過display:table-cell實現

css代碼：

aside { width : 200 px ; height : 200 px ; float : left ; background-color : red ; } . content { display : table-cell ; width : 3000 px ; height : 200 px ; background-color : blue ; }