Question

我有一张固定高度（500px）但相对宽度（屏幕的100％）的桌子。该表用作尺寸比较图表，背景图像的网格沿左边缘具有测量单位。

该表由三个单元格组成：一个空白的单元格，用于沿左边缘保存图例的空白区域，一个显示页面项目的中间单元格和一个填充了另一个图像的右侧单元格用户想要将尺寸与之比较的项目。

我可以让它显示得相对较好，但需要注意的是图像在桌子的上边缘而不是底边缘对齐。

我在修改位置和显示设置时所做的任何尝试只会使图像从视图中消失。

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

你谈论表但是使用float，为什么不显示：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>

将img与相对div的底部对齐

1 个答案: