对齐股利底部没有打破布局

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