CSS柱狀圖 - 很簡單

Question

我有一些非常基本的代碼和它的作品，除了一切對齊頂端......最好的酒吧將對準底部。我想我可以使用固定定位，因爲尺寸平方爲50像素×50像素，但我寧願少一點「固定」。

 <div style="border: 1px solid #aeaeae; background-color: #eaeaea; width: 50px; height: 50px;"> 
     <div style="position: relative; bottom: 0; float: left; width: 8px; height: 22px; background-color: #aeaeae; margin: 1px;"></div> 
     <div style="position: relative; bottom: 0; float: left; width: 8px; height: 11px; background-color: #aeaeae; margin: 1px;"></div> 
     <div style="position: relative; bottom: 0; float: left; width: 8px; height: 6px; background-color: #aeaeae; margin: 1px;"></div> 
     <div style="position: relative; bottom: 0; float: left; width: 8px; height: 49px; background-color: #aeaeae; margin: 1px;"></div> 
     <div style="position: relative; bottom: 0; float: left; width: 8px; height: 28px; background-color: #aeaeae; margin: 1px;"></div> 
     </div> 

我不想使用庫或JS添加。保持這個輕量級是關鍵任務。

而且我喜歡的酒吧是垂直的。任何CSS大師都在關心我擺脫了一點光明，我似乎失蹤了？我GOOGLE和最例子是遠遠複雜/精密，使用position: absolute，並代替float:left;使用left: 0px;，8px，16px等

Answer 1

首先，從你的HTML代碼中分離你的CSS。當你爲內部div使用bar類時，你會重複太多的代碼。

bottom: 0不會改變相對定位的div什麼。

如果你想使用相對定位，擺脫浮動和底部，並使用display: inline-block和vertical-align: baseline;。此外，在這種情況下，您需要去除內部div（換行符）之間的HTML空間。

這樣的（你可以看到在http://dabblet.com/gist/2779082演示）：

HTML

<div class="graph"> 
     <div style="height: 22px;" class="bar"></div><!-- 
     --><div style="height: 11px;" class="bar"></div><!-- 
     --><div style="height: 6px;" class="bar"></div><!-- 
     --><div style="height: 49px;" class="bar"></div><!-- 
     --><div style="height: 28px;" class="bar"></div> 
</div> 

CSS

.graph { 
    width: 50px; 
    height: 50px; 
    border: 1px solid #aeaeae; 
    background-color: #eaeaea; 
} 
.bar { 
    width: 8px; 
    margin: 1px; 
    display: inline-block; 
    position: relative; 
    background-color: #aeaeae; 
    vertical-align: baseline; 
} 

Answer 2

。
同時將position: relative添加到容器中。

Answer 3

Kolink的答案是正確的。每個div div的寬度是8px，加上margin-left和margin-right，8 + 1 + 1 = 10px。所以我建議，將左邊的數值爲0px，10px的，20像素...

<div class="wrapper"> 
    <div style=" left:0px;height:22px;"></div> 
    <div style="left:10px;height:11px;"></div> 
    <div style="left:20px;height:6px;"></div> 
    <div style="left:30px;height:49px;"></div> 
    <div style="left:40px;height:28px;"></div> 
</div> 

CSS的應該是這樣的（我分組一些一般的CSS規則）：

.wrapper{ 
    border: 1px solid #aeaeae; 
    background-color: #eaeaea; 
    width: 50px; 
    height: 50px; 
    position : relative; 

} 

.wrapper > div{ 
    bottom: 0px; 
    width: 8px; 
    position : absolute; 
    background-color: #aeaeae; 
    margin: 1px; 
    display : inline-block; 

} 

您可以檢查此鏈接：http://jsfiddle.net/zhujy_8833/AFbt4/查看上述代碼的結果。

Answer 4

我會親自避免每一個元素上明確設置XPOS，使事情少維護。在一些基於百分比的基於價值的轉儲中也會更合適。考慮到這一點，我們在fiddle中模擬了一種更具可擴展性和語義的正確方法。 HTML：

<ul class="graph"> 
    <li><span style="height:45%"></span></li> 
    <li><span style="height:12%"></span></li> 
    <!--as many more items as you want !--> 
</ul> 

和CSS：

.graph { 
    border: 1px solid #aeaeae; background-color: #eaeaea;/*"canvas" styling*/ 
    float:left; /*should be clearfix'd instead, but this is OK for a demo*/ 
} 
.graph li { 
    width:8px; height:50px; /*set a bar width and a full height*/ 
    float:left; /*to have bars "left-aligned"*/ 
    position:relative; /*needed for the actual bar fill element*/ 
    margin:2px; 
} 
.graph li+li { 
    margin-left:0; /*avoid margin double-up between bars as they don't collapse*/ 
} 
.graph span { 
    position:absolute;right:0;bottom:0;left:0; /*"bottom-align" the bars, 
                widths will be set inline*/ 
    background-color: #aeaeae; 
} 

這也給你的潛力得到相當花哨 - 酒吧可能有內容與負文本縮進語義值或<span>元素可以有利於完全被拋棄的僞元素。

Answer 5

如果你給父position: relative，那麼你可以使用position: absolute兒童div將它們放置在精確的座標通過設置left，top，right，bottom，width，height可以精確控制在你的酒吧酒吧的位置圖表。

.graph { 
 
    position: relative; 
 
    width: 54px; 
 
    height: 54px; 
 
    border: 1px solid blue; 
 
    background-color: lightgrey; 
 
} 
 

 
.bar { 
 
    position: absolute; 
 
    border: 1px solid blue; 
 
    background-color: yellow; 
 
}

<div class="graph"> 
 
    <div style="position:absolute; left: 1px; top: 1px; right: 1px; bottom: 1px"> 
 
    <div class="bar" style="bottom: 0; left: 0; width: 8px; height: 22px"></div> 
 
    <div class="bar" style="bottom: 0; left: 10px; width: 8px; height: 11px"></div> 
 
    <div class="bar" style="bottom: 0; left: 20px; width: 8px; height: 6px"></div> 
 
    <div class="bar" style="bottom: 0; left: 30px; width: 8px; height: 49px"></div> 
 
    <div class="bar" style="bottom: 0; left: 40px; width: 8px; height: 28px"></div> 
 
    </div> 
 
</div> 
 

 
<p></p> 
 

 
<div class="graph"> 
 
    <div style="position:absolute; left: 1px; top: 1px; right: 1px; bottom: 1px"> 
 
    <div class="bar" style="left: 0; top: 0; height: 8px; width: 22px"></div> 
 
    <div class="bar" style="left: 0; top: 10px; height: 8px; width: 11px"></div> 
 
    <div class="bar" style="left: 0; top: 20px; height: 8px; width: 6px"></div> 
 
    <div class="bar" style="left: 0; top: 30px; height: 8px; width: 49px"></div> 
 
    <div class="bar" style="left: 0; top: 40px; height: 8px; width: 28px"></div> 
 
    </div> 
 
</div>