0

我正在尝试仅使用 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来计算边距并底部对齐它们？

在此处输入图像描述

最终结果

4

4 回答 4

2

这是应该完成工作的 CSS 和标记（未absolute positioning使用）-

演示

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

演示

于 2012-12-26T06:43:38.607 回答
1

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

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/

于 2012-12-26T06:42:54.067 回答
0

您可以通过使用内联块元素并为它们提供一个垂直对齐值底部来获得所需的效果。这是一些简单的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;
}
于 2012-12-26T06:47:04.270 回答
0 
<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

于 2012-12-26T06:48:02.030 回答