css實現的三列等高效果程式碼例項

admin發表於2017-03-30
CSS

本章節分享一段程式碼例項，它實現了三列等高效果。

通常是使用javascript實現，其實使用純css也能夠實現。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#wrap{
  width:1000px;
  margin:0 auto;
  overflow:hidden;
}
#left,#center,#right{
  margin-bottom:-10000px;
  padding-bottom:10000px;
  text-align:center;
}
#left{
  background:#00FFFF;
  float:left;
  width:250px;
}
#center{
  background:#FF0000;
  float:left;
  width:500px;
}
#right{
  width:250px;
  background: #00FF00;
  float:right;
}
</style>
</head>
<body>
<div id="wrap">
  <div id="left">
    <p>螞蟻部落一</p>
    <p>螞蟻部落一</p>
    <p>螞蟻部落一</p>
    <p>螞蟻部落一</p>
    <p>螞蟻部落一</p>
  </div>
  <div id="center">
    <p>螞蟻部落二</p>
    <p>螞蟻部落二</p>
    <p>螞蟻部落二</p>
    <p>螞蟻部落二</p>
    <p>螞蟻部落二</p>
    <p>螞蟻部落二</p>
    <p>螞蟻部落二</p>
    <p>螞蟻部落二</p>
    <p>螞蟻部落二</p>
    <p>螞蟻部落二</p>
    <p>螞蟻部落二</p>
    <p>螞蟻部落二</p>
    <p>螞蟻部落二</p>
    <p>螞蟻部落二</p>
    <p>螞蟻部落二</p>
    <p>螞蟻部落二</p>
    <p>螞蟻部落二</p>
    <p>螞蟻部落二</p>
    <p>螞蟻部落二</p>
    <p>螞蟻部落二</p>
  </div>
  <div id="right">
    <p>螞蟻部落三</p>
    <p>螞蟻部落三</p>
    <p>螞蟻部落三</p>
  </div>
</div>
</body>
</html>

上面的程式碼實現了我們的要求，下面對幾個重要點做一下介紹。

程式碼分析:

[CSS] 純文字檢視 複製程式碼
#wrap{
  width:1000px;
  margin:0 auto;
  overflow:hidden;
}

上面的是定義容器元素，margin:0 auto使容器元素居中顯示。

overflow:hidden這個非常的關鍵，將三個並列的div超出的部分隱藏。

[CSS] 純文字檢視 複製程式碼
#left,#center,#right{
  margin-bottom:-10000px;
  padding-bottom:10000px;
  text-align:center;
}

這是實現了等高效果的關鍵。

這裡涉及到外邊距負值的作用的相關功能關鍵。

padding-bottom:10000px讓元素的實際尺寸向下延伸10000px。

margin-bottom:-10000px讓元素的文件流又回退10000px。

這樣再利用父元素overflow:hidden進行擷取就實現了等高效果。

當然如果某一個元素的內容的高度值大於其他任意一個元素的實際高度值（padding+內容），那麼就無法實現等高。但是因為padding-bottom這個值非常的大，很少可能會出現上述情況。

關於外邊距負值的應用可以參閱margin外邊距負值作用詳解一章節。

相關文章