對齊股利底部沒有打破布局

Question

我要對齊的杆的底部位置：http://jsfiddle.net/7vdLV/67/

我使用下面的技巧嘗試：

.graph { position: relative; } 
    .weekbar { position: absolute; bottom: 0; left: 0; } 

但是它打破了圖表，誰能告訴我在這種情況下，我應該怎麼做？

Answer 1

簡單的解決方案：

申請

.weekbar{ 
position:relative; 
display:inline-block; 
top:50%; // height of biggest bar 
} 

入住這JSFiddle

或者，如果古代的瀏覽器支持不是什麼大不了的事，你可以使用::before元素如下：

.graph::before{ 
content:""; 
display:block; 
height:50%; // height of the biggest bar 
} 
.weekbar{ 
display:inline-block; 
} 

檢查此JSFiddle

Answer 2

調整了HTML位以及CSS和得到這個：http://jsfiddle.net/7vdLV/74/

<div class="graph"> 
    <div class="weekbar"><div style="height: 10%;"></div></div> 
    <div class="weekbar"><div style="height: 20%;"></div></div> 
    <div class="weekbar"><div style="height: 30%;"></div></div> 
    <div class="weekbar"><div style="height: 40%;"></div></div> 
</div> 

由於TylerH指出內嵌樣式被認爲是不好的做法，所以你會得到更好的替代它們帶班，即

<div class="graph"> 
    <div class="weekbar"><div class="h10"></div></div> 
    <div class="weekbar"><div class="h20"></div></div> 
    <div class="weekbar"><div class="h30"></div></div> 
    <div class="weekbar"><div class="h40"></div></div> 
</div> 

.h10 { 
    height: 10%; 
} 

Answer 3

我會改變float爲display:inline-block;然後在圖的開頭設置一個「隱形」重置器div以確保所有元素從底部（而不是最高線的底部）。

.weekbar { 
    width: 3.1%; 
    margin-left: -4px; 
    margin-right: 2%; 
    display:inline-block; 
    background-color: #aeaeae; 
} 
.resetter{ 
    height:100%; 
    display:inline-block; 
    width:0; 
    margin-right:-4px; 
} 

看看這個JSFiddle。

另外在關於內聯樣式使用（不做！）的說明。如果你知道你有一個離散的高度（即在你的例子中它們都是10的倍數），我會建議爲它們創建類。

Answer 4

作出這些修改你的CSS：

.graph { position:relative; } 
.weekbar { position: relative; top: 100%; left: 0; } 

這就是你正在尋找呢？ http://jsfiddle.net/4HEEk/

Answer 5

儘量變換：

-moz-transform: scaleY(-1); 
-o-transform: scaleY(-1); 
-webkit-transform: scaleY(-1); 
transform: scaleY(-1); 
filter: FlipV; 
-ms-filter: "FlipV"; 

http://jsfiddle.net/L4A2h/1/

Answer 6

只需更換。用下面的代碼圖類

.graph { 
width: 100%; 
height: 200px; 
background-color: #eaeaea; 
-moz-transform: scaleY(-1); 
-o-transform: scaleY(-1); 
-webkit-transform: scaleY(-1); 
transform: scaleY(-1); 
filter: FlipH; 
-ms-filter: "FlipH"; 
} 

希望這有助於

Answer 7

您可以通過這個jQuery代碼使用position:relative;家長和position:relative;也爲孩子和計算top值：

$(document).ready(function() { 
    var parentHeight = $('.graph').height(); 
    $('.weekbar').each(function() { 
     var height = parentHeight - $(this).height(); 
     $(this).css('top',height*100/parentHeight + '%'); 
    }); 
}); 

這裏是一個working fiddle