Question

我想在这里将条形对齐到底部：http://jsfiddle.net/7vdLV/67/

我尝试使用以下技巧：

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

然而它打破了图表，在这种情况下，有人能告诉我应该怎么做吗？

Answer 1

稍微调整了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 2

尝试转换：

-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 3

只需使用以下代码替换.graph类

.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 4

最简单的解决方案：

申请

.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 5

对CSS进行以下编辑：

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

这是你想要做的吗？ http://jsfiddle.net/4HEEk/

Answer 6

您可以将position:relative;用于父级，position:relative;也用于子级，并通过此jQuery代码计算top值：

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

这是working fiddle

Answer 7

我会为float更改display:inline-block;，然后设置＆＃34;隐形＆＃34;在图表的开头重置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的倍数）我会建议为它们创建类。

将div对齐而不破坏布局

7 个答案: