左右兩列寬度固定，中間一列寬度自適應程式碼例項

antzone發表於2017-04-11

在很多網站的佈局中，都有這樣的效果，那就是左右兩列寬度固定，中間一列寬度自適應。

本站的頭部其實就有這樣的功能，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
* {
  margin: 0;
  padding: 0;
}
body {
  padding: 20px;
}
#main {
  float: left;
  width: 100%;
  background-color: green;
  height: 400px;
}
#left {
  width: 200px;
  height: 500px;
  float: left;
  margin-left: -100%;
  background-color: red;
  margin-right: 20px;
}
#right {
  margin-left: -120px;
  float: left;
  background-color: blue;
  width: 120px;
  height: 500px;
}
</style>
</head>
<body>
<div id="main"></div>
<div id="left"></div>
<div id="right"></div>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

[CSS] 純文字檢視 複製程式碼
* {
  margin: 0;
  padding: 0;
}
body {
  padding: 20px;
}

進行一些初始化的設定，首先設定所有元素的內邊距和外邊距都為0。

然後設定body的內邊距為20px，便於效果的觀察。

[CSS] 純文字檢視 複製程式碼
#main {
  float: left;
  width: 100%;
  background-color: green;
  height: 400px;
}

這個是中間一列元素。

左浮動，寬度是百分之百。

[CSS] 純文字檢視 複製程式碼
#left {
  width: 200px;
  height: 500px;
  float: left;
  margin-left: -100%;
  background-color: red;
  margin-right: 20px;
}

設定為左浮動。

程式碼的關鍵是margin-left: -100%，元素的邊界是由外邊距確定的，所以將外邊距設定為負數，那麼中間一列元素就可以伸展到左列的下面。關於負外邊距的具體用法可以參閱相關閱讀。

二.相關閱讀:

（1）.負外邊距可以參閱css margin外邊距一章節。

（2）.float可以參閱float浮動用法詳解一章節。

相關文章