CSS等寬均勻分佈效果

admin發表於2017-11-30
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,ul,li{
  padding:0;
  margin:0;
}
ul,li{list-style:none;}
.container{
  height:210px;
  width:460px;
  border:5px solid #000;
  margin:10px;
  overflow:hidden;
}
ul{
  height:210px;
  margin-right:-20px;
}
li{
  height:100px;
  width:100px;
  background:#09F;
  float:left;
  margin-right:20px;
  margin-bottom:10px;
  text-align:center;
  line-height:100px;
}
</style>
</head>
<body>
<div class="container">
  <ul>
    <li>螞蟻部落一</li>
    <li>螞蟻部落二</li>
    <li>螞蟻部落三</li>
    <li>螞蟻部落四</li>
    <li>螞蟻部落五</li>
    <li>螞蟻部落六</li>
    <li>螞蟻部落七</li>
    <li>螞蟻部落八</li>
  </ul>
</div>
</body>
</html>

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

實現原理:

[CSS] 純文字檢視 複製程式碼
body,ul,li{
  padding:0;
  margin:0;
}

消除元素預設的外邊距和內邊距的功能，這種方式有點粗暴，效能不夠好。

推薦參閱css樣式初始化程式碼例項一章節。

[CSS] 純文字檢視 複製程式碼
.container{
  height:210px;
  width:460px;
  border:5px solid #000;
  margin:10px;
  overflow:hidden;
}

定義我們看到的黑色邊框。

overflow:hidden規定超出的內容隱藏。

[CSS] 純文字檢視 複製程式碼
ul{
  height:210px;
  margin-right:-20px;
}

margin-right:-20px使元素的寬度增長20px，但條件是此元素沒有顯式固定寬度。

負值的影響可以參閱margin外邊距負值作用詳解一章節。因為使用margin-right:20px，所以li與li之間是有間隔的，但是最右側的li不需要margin-right。設定ul右外邊距-20px，增加20px以容納著多出的margin-right，然後通過父元素container的over-flow:hidden來隱藏多出的20px。

使用彈性佈局也可以實現類似功能，具體參閱flex產品列表均勻分佈程式碼例項一章節。

相關文章