中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

原理

其實訣竅很簡單，讓左邊欄與右邊padding，右邊欄與左邊padding，中間剛好剩下自適應的內容層.
讓我們一步一步來演示這個過程

第一步：創(chuàng)建父級容器

包括header, footer, and container.

<div id="header"></div> 
<div id="container"></div> 
<div id="footer"></div>

我們讓container（包容的容器）padding-left，padding-right，padding的值分別是左邊欄和右邊欄的值.

#container {
  padding-left: 200px;   /* LC width */
  padding-right: 150px;  /* RC width */
}

我們的布局大致是這樣的：

第二步：添加欄

我們現在已經有了父級容器，現在來插入里面的三欄

<div id="header"></div>
 
<div id="container">
  <div id="center" class="column"></div>
  <div id="left" class="column"></div>
  <div id="right" class="column"></div>
</div>
 
<div id="footer"></div>

現在我們要添加寬度和浮動屬性以使他們在一行，并且在footer清除浮動

#container .column {
  float: left;
}
#center {
  width: 100%;
}
#left {
  width: 200px;  /* LC width */
}
#right {
  width: 150px;  /* RC width */
}
#footer {
 
  clear: both;
}

你會留意到中間的層已經和外面的層一樣寬了(除去padding值的情況下)，一會我們就可以看見所有的層都在一起并且也是100%寬�，F在,層的順序就是我們想要的順序了，但是因為中間的層占據了100%的寬度，所以左邊和右邊的層就掉了下來。

出處：Alipay UED
責任編輯：moby

上一頁 尋找圣杯 [2] 下一頁 尋找圣杯 [4]

◎進入論壇網頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。