css實現的左右兩列寬度固定中間寬度自適應

antzone發表於2017-03-31
CSS

本章節分享一段程式碼例項，它實現了左右兩列寬度固定，中間一列寬度自適應效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
body{
  margin:0;
  padding:0;
  min-width:600px;
}
.main{
   float:left;
   width:100%;
 }
.main_body{
  margin:0 210px;
  background:#888;
  height:200px;
}
.left,.right{
  float:left;
  width:200px;
  height:200px;
  background:#F60;
}
.left{
  margin-left:-100%;
}
.right{
  margin-left:-200px;
}
</style>
</head>
<body>
<div class="main">
  <div class="main_body"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</body>
</html>

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

程式碼分析:

[CSS] 純文字檢視 複製程式碼
.main{
  float:left;
  width:100%;
}

此元素是全屏的並且是浮動的，之所以浮動，是讓後面的兩個浮動的div有可能與此div處於一行。

[CSS] 純文字檢視 複製程式碼
.main_body{
  margin:0 210px;
  background:#888;
  height:200px;
}

上面的程式碼就是中間可以自適應寬度的塊。

margin:0 210px實現了兩端有空隙。

[CSS] 純文字檢視 複製程式碼
.left,.right{
  float:left;
  width:200px;
  height:200px;
  background:#F60;
}

這就是普通的浮動，規定了兩端寬度固定的元素。

[CSS] 純文字檢視 複製程式碼
.left{
  margin-left:-100%;
}
.right{
  margin-left:-200px;
}

負外邊距可以實現改變"浮動流"的功能，這個名稱可能正式文件中並不存在，可以根據"文件流"類比。

具體可以參閱負外邊距margin對float浮動元素的影響一章節。

相關文章