html - 使用 div 创建垂直条

Question

我正在尝试仅使用 html 和 css 创建两个水平条，如下例所示。我正在使用以下代码:

<div style="height: 150px;">
  <div style="width: 55px;float:left;">
      <div>340.8</div>
      <div style="background-color:#95111d; height: 75px;">
          &nbsp;
      </div>
  </div>
  <div style="width:55px;float:left">
      <div>340.8</div>
      <div style="background-color:#9e9e9e; height: 115px;">
          &nbsp;
      </div>
  </div>
  <br style="clear: both" />
</div>

这个问题是两个条形图都位于它们包含的 div 的顶部而不是底部，所以你会得到下面的第二个图像效果。

我有一些代码可以生成这些条的高度，所以我不能只添加顶部填充/边距来将它们推到位。有什么方法可以做到这一点，而无需诉诸 javascript 来计算边距和底部对齐吗？

Answer 1

这是应该完成工作的 CSS 和标记(未使用绝对定位)-

DEMO

HTML:

<div id="wraper">
  <div id="c1">
     <div id="h1">340.8</div>
      <div id="b1">
          &nbsp;
      </div>
  </div>
  <div id="c2">
      <div id="h2">340.8</div>
      <div id="b2">
          &nbsp;
      </div>
  </div>
  <br style="clear: both" />
</div>

CSS:

#wraper {
   height: 150px;
}

#c1 {
   width: 55px;
   vertical-align: bottom;
   display: inline-block;
}

#b1 {
   background-color: #95111d;
   height: 75px;
}

#c2 {
   width: 55px;
   margin-left: -4px;
   display: inline-block;
}

#b2 {
   background-color: #9e9e9e;
   height: 115px;
}

DEMO