0

html と css のみを使用して、以下の例のような 2 つの水平バーを作成しようとしています。私は次のコードを使用しています：

<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 の上部にあるため、下の 2 番目の画像効果が得られることです。

これらのバーの高さを生成するコードがいくつかあるので、上部のパディング/マージンを追加してバーを所定の位置に押し込むことはできません。マージンを計算して下に揃えるために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>
    <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>

jsフィドル

于 2012-12-26T06:48:02.030 に答える