javascript - 有没有办法以某种方式同时拥有绝对位置(底部)和同一 div 的多个并排？

Question

我将 div 用作一种柱形图的构建 block 。每个 div 占屏幕的 1%，而且有很多。我希望它们都通过 bottom: 0px; 粘在父 div 的底部。并以某种方式使用 float:left; 将其中的多个并排放置；或显示:内联；

我得到的是相对位置和 float: left;工作

-----------------------
|IIIIIIIIIIIIIIIIIIIII|
|                     |
|                     |
|                     |
-----------------------

或者这个带有 bottom: 0px 的绝对位置；工作，当然所有 我的 Div 被绘制在彼此之上

-----------------------
|                     |
|                     |
|                     |
|I                    |
-----------------------

我想要的是这样的东西，这样我就可以更改我的 div 的大小并制作我的柱形图。

-----------------------
|                     |
|                     |
|                     |
|IIIIIIIIIIIIIIIIIIIII|
-----------------------

这当然可以通过单独设置样式或通过 JS 来实现，这可能是我最终要做的。但是是否有一种好的 HTML-CSS 方式来做到这一点？

.Column {
    float: left;
    position: absolute;
    bottom: 0;
    width: 1%;
}

.Graph {
    position: relative;
    margin: auto;
    width: 80%;
    height: 400px;
    border: 3px solid green;

}

Answer 1

您可以使用 flexbox 来实现这一点:

.container {
  display:flex;
  height:150px;
  border:1px solid;
  align-items:flex-end;
}
.container > span {
  width:10px;
  height:20px;
  background:red;
  margin:0 5px;
}
.container > span:nth-child(odd) {
  background:blue;
  height:30px;
}

<div class="container">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

或者一些内联 block 技巧:

.container {
  height:150px;
  border:1px solid;
}
.container:before {
  content:"";
  display:inline-block;
  height:100%;
}
.container > span {
  display:inline-block;
  width:10px;
  height:20px;
  background:red;
  margin:0 5px;
}
.container > span:nth-child(odd) {
  background:blue;
  height:30px;
}

<div class="container">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>