相対的なdivの下にimgを整列する

Question

テーブルは固定高さ（500px）で、相対幅（画面の100％）を持っています。この表は、サイズ比較チャートとして機能し、左端に測定単位がある背景画像用のグリッドを備えています。

テーブルは3つのセルで構成されています。左側の辺に沿って凡例の空白を保持する空白の1つ、ページのアイテムを表示する中央のセル、およびユーザーが別のアイテムのイメージで表示される右側のセルサイズを比較したい

私はこれを比較的うまく表示することができますが、画像は下端ではなく上端に合わせているという警告があります。

位置や表示の設定を変更しようとすると、画像が表示されなくなるだけです。

HTML：

<div id="scalechart"> 
     <div id="buffer"></div> 
     <div id="nochoice"><img src="http://www.example.com/image1.png" class="leader"></div> 
     <div id="firstchoice"><img src="http://www.example.com/image2.png" class="leader"></div> 
</div> 

CSS：

scalechart { 
    text-align: right; 
    position: relative; 
    z-index: 1; 
    display: block; 
    width: 100%; 
    border: 2px solid grey; 
    height: 500px; 
    clear: both; 
    background: url(../../legend.png) no-repeat, url(../../Gridlines.png) repeat-x; 
    background-size: contain; 
} 

#buffer { 
    width: 144px; 
    position: relative; 
    display: inline-block; 
    height: 100%; 
    float: left; 
} 

#nochoice, #firstchoice { 
    position: relative; 
    display: inline-block; 
    float: left; 
} 

私は位置を絶対作ると下部を設定しようと、左0ではなく、画像だけで消えました。どんな助けもありがとうございます。

Answer 1

あなたはテーブルについて話しますが、浮動小数点数を使用すると、なぜ表示されませんか：table/table-cell？

私はいくつかのCSSを削除しました。ここではデモのために役に立たないと思いました。

#scalechart { 
 
    text-align: right; 
 
    display: table; 
 
    width: 100%; 
 
    border: 2px solid grey; 
 
    height: 500px; 
 
    background: url(../../legend.png) no-repeat, url(../../Gridlines.png) repeat-x; 
 
    background-size: contain; 
 
} 
 
#buffer { 
 
    width: 144px; 
 
    display: table-cell; 
 
} 
 
#nochoice, 
 
#firstchoice { 
 
    display: table-cell; 
 
    vertical-align: bottom; 
 
}

<div id="scalechart"> 
 
    <div id="buffer"></div> 
 
    <div id="nochoice"> 
 
    <img src="http://www.example.com/image1.png" class="leader"> 
 
    </div> 
 
    <div id="firstchoice"> 
 
    <img src="http://www.example.com/image2.png" class="leader"> 
 
    </div> 
 
</div>