有没有办法以某种方式将绝对位置（底部）和相同 div 的倍数并排放置？

Question

我使用 divs 作为一种柱形图的构建块。每个 div 占据屏幕的 1%，而且数量很多。我希望他们都坚持他们 parent div 的底部 via bottom: 0px;并以某种方式并排使用 float:left;或 display:inline；

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

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

或者这个与底部的绝对位置：0px；工作，当然所有我的 Div 相互叠加

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

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

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

这当然可以通过在dividually 中或通过 JS 对它们进行样式设置，这可能是我最终会做的事情。但是有没有好的 HTML-CSS-only 方法来做到这一点？

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

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

}

Answer 1

这是我认为您正在寻找的示例：https://jsfiddle.net/n172eubg/3/

#container {
  position: relative;
  width: 1000px;
  height: 500px;
  border: 2px solid red;
}

#parent {
  position: absolute;
  bottom: 0px;
  left: 5%;
  height: 100px;
  width: 90%;
  border: 2px solid #000;
}

.child {
  postion: relative;
  display: inline-block;
  height: 100%;
  width: 10%;
  margin: 0px 7px;
  border: 2px solid blue;
}

<div id="container">
  <div id="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>

讨论后编辑

#container {
  position: relative;
  width: 1000px;
  height: 500px;
  border: 2px solid red;
}


#parent {
 position: absolute;
  
 bottom: 0px;
 left: 5%;
  
 height: 300px;
 width: 90%;
 
 border: 2px solid #000;
}

.child {
 postion: relative;
 display: inline-block;
 
 height: 10%;
 width: 10%; 
  
 margin: 0px 7px;
 border: 2px solid blue;
}

.height2 {
   height: 20%;
}

.height3 {
   height: 30%;
}

.height4 {
   height: 100%;
}

<div id="container">
  <div id="parent">
   <div class="child height2"></div>
   <div class="child height2"></div>
   <div class="child height2"></div>
   <div class="child height3"></div>
   <div class="child height3"></div>
   <div class="child height3"></div>
   <div class="child height4"></div>
  </div>
</div>

Answer 2

你可以使用 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>

或一些内联块技巧：

.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>

有没有办法以某种方式将绝对位置（底部）和相同 div 的倍数并排放置？

Is there a way to somehow have both absolute position (bottom) and multiple of the same div side by side?

html

javascript

css

position

absolute