css - 我需要将条排在底部，而不是顶部

Question

试图建立一个垂直条形图。明白了，但是，酒吧在顶部排成一列。我希望他们在底部排队。如果没有运气，似乎无法弄清楚那部分。我打电话给Guru的CSS寻求帮助。我敢肯定它既简单又小巧，会让我看起来像一只 bafone……就这样吧！

.box {
  float: left;
  height: 70%;
}


/* The bar container */

.bar-container {
  height: 100px;
  width: 100%;
  background-color: #f1f1f1;
}


/* Individual bars */

.bar-5 {
  height: 60%;
  width: 4px;
  background-color: green;
}

.bar-4 {
  height: 30%;
  width: 4px;
  background-color: blue;
}

.bar-3 {
  height: 10%;
  width: 4px;
  background-color: orange;
}

.bar-2 {
  height: 4%;
  width: 4px;
  background-color: red;
}

.bar-1 {
  height: 15%;
  width: 4px;
  background-color: purple;
}

<div class="box">
  <div class="bar-container">
    <div class="bar-5"></div>
  </div>
</div>
<div class="box">
  <div class="bar-container">
    <div class="bar-4"></div>
  </div>
</div>
<div class="box">
  <div class="bar-container">
    <div class="bar-3"></div>
  </div>
</div>
<div class="box">
  <div class="bar-container">
    <div class="bar-2"></div>
  </div>
</div>
<div class="box">
  <div class="bar-container">
    <div class="bar-1"></div>
  </div>
</div>

标签： css

Answer 1

最简单的方法是添加

  display:flex;
  align-items:flex-end;

到你的.bar-container班级

.box {
  float: left;
  height: 70%;
}


/* The bar container */

.bar-container {
  height: 100px;
  width: 100%;
  background-color: #f1f1f1;
  display:flex;
  align-items:flex-end;
}

/* Individual bars */

.bar-5 {
  height: 60%;
  width: 4px;
  background-color: green;
}

.bar-4 {
  height: 30%;
  width: 4px;
  background-color: blue;
}

.bar-3 {
  height: 10%;
  width: 4px;
  background-color: orange;
}

.bar-2 {
  height: 4%;
  width: 4px;
  background-color: red;
}

.bar-1 {
  height: 15%;
  width: 4px;
  background-color: purple;
}

<div class="box">
  <div class="bar-container">
    <div class="bar-5"></div>
  </div>
</div>
<div class="box">
  <div class="bar-container">
    <div class="bar-4"></div>
  </div>
</div>
<div class="box">
  <div class="bar-container">
    <div class="bar-3"></div>
  </div>
</div>
<div class="box">
  <div class="bar-container">
    <div class="bar-2"></div>
  </div>
</div>
<div class="box">
  <div class="bar-container">
    <div class="bar-1"></div>
  </div>
</div>