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计算保证金和底部对齐它们？

enter image description here

End Result

Answer 1

以下是应该完成工作的CSS和标记（ no absolute positioning使用） -

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

Answer 2

您可以使用绝对定位将元素固定到其容器的底部。

HTML：

<div class="container">
  <div class="bar">
      <div>
          <div>340.8</div>
          <div style="background-color:#95111d; height: 75px;">&nbsp;</div>
      </div>
  </div>
  <div class="bar">
      <div>
          <div>340.8</div>
          <div style="background-color:#9e9e9e; height: 115px;">&nbsp;</div>
      </div>
  </div>
  <br style="clear: both" />
</div>

CSS：

.container {
    height: 150px;
}

.bar {
    width: 55px;
    float: left;
    position: relative;
    height: 100%;
}

.bar > div {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
}

示例：http://jsfiddle.net/grc4/pAnqe/1/

Answer 3

通过使用内联块元素并为它们提供底部的垂直对齐值，可以获得所需的效果。这里有一些简单的html和css。

HTML

  <span class="bar" style="height:75px;background-color:#95111d;">
      <div class="label">340.8</div>
  </span>
  <span class="bar" style="height:115px;background-color:#9e9e9e;">
      <div class="label">350.1</div>
  </span>

CSS

.bar {
    display:inline-block;
    width: 55px;
    vertical-align:bottom;
}
.label {
    position:relative;
    top:-1em;
}

Answer 4

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

jsFiddle

使用div创建垂直条

4 个答案: