CSS如何實現柱狀效果

admin發表於2017-02-10
CSS
在一些統計工作中，經常會有柱狀效果圖的應用，非常的形象直觀，下面簡單介紹一下如何實現此種效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.parent{
  width:300px;
  height:200px;
  position:relative;
}
.parent div{
  position:absolute;
  bottom:0px;
}
.first{
  height:180px;
  width:30px;
  background-color:green;
}
.second{
  height:140px;
  width:30px;
  background-color:blue;
  left:30px;
}
.third{
  height:130px;
  width:30px;
  background-color:yellow;
  left:60px;
}
</style>
</head>
<body>
<div class="parent">
  <div class="first"></div>
  <div class="second"></div>
  <div class="third"></div>
</div>
</body>
</html>

以上程式碼實現了我們的要求，使用的方法是將三個div進行絕對定位實現的，大家可能會想為什麼不用浮動呢，這是因為如果使用浮動的話，div都是上端對齊的，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.parent{
  width:300px;
  height:200px;
}
.parent div{float:left;}
.first{
  height:180px;
  width:30px;
  background-color:green;
}
.second{
  height:140px;
  width:30px;
  background-color:blue;
}
.third{
  height:130px;
  width:30px;
  background-color:yellow;
}
</style>
</head>
<body>
<div class="parent">
  <div class="first"></div>
  <div class="second"></div>
  <div class="third"></div>
</div>
</body>
</html>

當然也可能有這樣的需求，可以根據實際需要採用不同的方法。

相關文章