html - 在不破坏布局的情况下将 div 对齐到底部

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%;
}