css實現的左右兩側寬度固定中間自適應可變程式碼

admin發表於2017-03-09
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{
  padding:px;
  margin:0px;
}
#container{
  width:85%;
  margin:0 auto;
  position:relative;
}
#navi{
  width:200px;
  position:absolute;
  left:0px;
  top:0px;
  background:green;
  height:200px;
}
#content{
  margin-right:200px;
  margin-left:200px;
  background:red;
  height:200px;
}
#side{
  width:200px;
  position:absolute;
  right:0px;
  top:0px;
  background:blue;
  height:200px;
}
</style>
</head>
<body>
<div id="container">
  <div id="innerContainer">
    <div id="navi">
    </div>
    <div id="content"></div>
    <div id="side"></div>
  </div>
</div>
</body>
</html>

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

實現原理:

container容器元素設定為相對定位，並且居中顯示，居中可以如下程式碼實現:

[CSS] 純文字檢視 複製程式碼
margin:0 auto

然後將左右兩側的寬度固定的元素設定為絕對定位，並且分別作做定位和有定位，這樣就實現了兩個元素始終固定在左右兩側的效果。而中間的元素分別設定左邊距和右邊距左右兩邊的元素的寬度，因為左右變數是絕對定位，脫離了穩定流，所以左右外邊距的參考物件是container。這樣就實現了我們的要求。

相關文章