Есть ли способ получить как абсолютную позицию (внизу), так и кратные одинакового div рядом?

Question

Я использую div в качестве основного блока для своего рода графа столбцов. Каждый div занимает 1% экрана и их много. Я хочу, чтобы они оба придерживались нижней части своего родительского div через bottom: 0px;и как-то иметь несколько из них рядом, используя float: left;или отображение: inline;

Я получаю либо это с относительной позиции и float: left;работая

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

или это с абсолютной позицией с основанием: 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

Вот пример того, что, я полагаю, вы ищете: 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>