CSS多種布局方式自我實現(xiàn)-三欄布局（一）

一律胀、float實現(xiàn)三欄布局

1、HTML代碼：

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="第一個三欄布局" />
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="container">
    <div id="topbar">This is topbar</div>
    <div id="navbar">This is nav bar</div>
    <div id="main">
      <div id="column_left">This is column_leftThis is column_leftThis is column_leftThis is column_leftThis is column_leftThis is column_leftThis is column_leftThis is column_leftThis is column_leftThis is column_left</div>
      <div id="column_right">This is column_rightThis is column_rightThis is column_rightThis is column_rightThis is column_rightThis is column_rightThis is column_right</div>
      <div id="column_right_adsense">This is column right adsense This is column right adsense This is column right adsense</div>
      <div id="clear">this is clear</div>
    </div>
    <div id="footer">This is footer</div>
  </div>
</body>
</html>

2貌矿、CSS代碼：

*{
  font-size:12px;
  padding: 0;
  margin:0;
}
body{
  background-color: #eee;
}
#container{

  background-color: #83A82B;

  width:500px;
  margin:50px auto;
}
#topbar{
  height:25px;
  background-color: #31DB20;
}
#column_left{
  float:left;
  width:250px;
  background-color: red;
}
#column_right{

  width:150px;
  background-color: #0f0;
  float:left;
}
#column_right_adsense{
  background-color: #00f;
  float:left;
  width:100px;
}
#clear{
  clear:both;
  background-color: pink;
}
#footer{
  background-color: piple;
}

3炭菌、結果展示：

三欄布局

4、注意事項

container逛漫、main不直接設置height,由內(nèi)容區(qū)撐起高度黑低，float后加clear元素清除浮動，撐起#main區(qū)高度。

5克握，以上實現(xiàn)方式的缺點

由于main寬度的固定蕾管，一旦某一欄添加了padding或margin,則會導致浮動欄下滑（浮動滑移），添加大圖片或是沒有空格的長字符串也都會打亂布局菩暗。

滑動漂移

6掰曾，滑動漂移的三種解決辦法

6.1 從設定的元素寬度中減去padding或margin的影響。

如：column_left增加padding:1px,則將其寬度減去2px停团，效果如下：

元素寬度減去影響值

?但是此方法操作起來比較麻煩旷坦，每次添加需要計算影響并修改代碼。

6.2 在元素內(nèi)部添加新div包裹元素內(nèi)容

設置padding和margin時應用于這個元素佑稠。部分代碼如下：
?HTML:
<div id="column_left"><div id="column_left_inner">This is column_leftThis is column_leftThis is column_leftThis is column_leftThis is column_leftThis is column_leftThis is column_leftThis is column_leftThis is column_leftThis is column_left</div></div>
?CSS:
#column_left_inner{ padding:10px; margin:10px; }

元素內(nèi)部再嵌套div包裹內(nèi)容

?此方法較上一種方法更為簡單秒梅。

6.3 box-sizing:border-box

為容器內(nèi)各元素設置box-sizing:border-box,將盒模型改為IE盒模型，即盒子寬度=content area+padding+border;注意此方法無法解決margin造成的布局打亂舌胶。
?部分CSS代碼

#column_left{
  box-sizing:border-box;
  float:left;
  width:250px;
  background-color: red;
  padding:10px;
  border:3px solid black;
}
#column_right{
  box-sizing:border-box;
  width:150px;
  background-color: #0f0;
  float:left;
}
#column_right_adsense{
  box-sizing:border-box;
  background-color: #00f;
  float:left;
  width:100px;
}

效果圖：

box-sizing:border-box

?此方法最為簡單捆蜀，但是不能消除margin的設置引起的布局混亂。

二辆琅、flex三欄布局

flex布局適用于線型布局漱办，使用flex布局能直接有效的避免因padding或border等造成的布局混亂。使用方便婉烟，推薦使用此方法娩井。
HTML代碼：

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="flex實現(xiàn)三欄布局" />
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="container">
    <div id="topbar">This is topbar</div>
    <div id="navbar">This is nav bar</div>
    <div id="main">
      <div id="column_left">This is column_leftThis is column_leftThis is column_leftThis is column_leftThis is column_leftThis is column_leftThis is column_leftThis isdafsssssssssssssssssssssssssssssssssssssssssssssssssssss column_leftThis is column_leftThis is column_left</div>
      <div id="column_right">This is column_rightThis is column_rightThis is column_rightThis is column_rightThis is column_rightThis is column_rightThis is column_right</div>
      <div id="column_right_adsense">This is column right adsense This is column right adsense This is column right adsense</div>

    </div>
    <div id="footer">This is footer</div>
  </div>
</body>
</html>

CSS代碼：

*{
  font-size:12px;
  padding: 0;
  margin:0;
}
body{
  background-color: #eee;
}
#container{

  background-color: #83A82B;

  width:500px;
  margin:50px auto;
}
#topbar{
  height:25px;
  background-color: #31DB20;
}

#main{
  display:flex;
  flex-flow:row nowrap;
  
}
#column_left{
  background-color: #f00;
  flex-grow:1;
  width:150px;
  padding:10px;
}
#column_right{
  background-color: #0f0;
  flex-grow:1;
  width:150px;
}
#column_right_adsense{
  flex-grow:1;
  background-color: #00f;
  width:150px;
}


#footer{
  background-color: piple;
}

結果展示：

flex實現(xiàn)三欄布局

三、絕對定位實現(xiàn)三欄布局

1. HTML代碼

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="flex實現(xiàn)三欄布局" />
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="container">
    <div id="topbar">This is topbar</div>
    <div id="navbar">This is nav bar</div>
    <div id="main">
      <div id="column_left">This is column_leftThis is column_leftThis is column_leftThis is column_leftThis is column_leftThis is column_leftThis is column_left</div>
      <div id="column_center">This is column_rightThis is column_rightThis is column_rightThis is column_rightThis is column_rightThis is column_rightThis is column_right</div>
      <div id="column_right">This is column right adsense This is column right adsense This is column right adsense</div>

    </div>    <!--main完-->
    <div id="footer">This is footer</div>
  </div>
</body>
</html>