我怎样才能让不同高度的div站在容器div的底部？

Question

我有很多以不同高度生成的div，以％表示。我希望divs站在黑色容器的底线上。我怎样才能做到这一点？如果我将它们绝对定位在底部：0，它们将相互重叠。

Answer 1

如果你能负担得起忽视IE9及以下......这就是开发flexbox的那种东西......

HTML

<div class="container">
  <div class="box">50%</div>
  <div class="box">25%</div>
  <div class="box">25%</div>
</div>

CSS

.container {
  height: 100vh;
  background: #000;
  display: flex;
  align-items: flex-end;
}

.box {
  height: 25%;
  width: 10em;
  margin-right: 1em;
  background-color: red;
}

.box:first-child {
    height: 50%;
}

Answer 2

我目前只知道一种方式，它涉及垂直翻转：http://jsfiddle.net/86c9gbvu/

它基于使用CSS转换（支持）。

#container { 
    width: 500px;
    height: 500px;
    background: black;
    -moz-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    transform: scaleY(-1);
    -ms-filter: flipv; /*IE*/
    filter: flipv;
}

#bar-one {
    width: 50px;
    height: 50%;
    background: red;
    display: inline-block;
    -moz-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    transform: scaleY(-1);
    -ms-filter: flipv; /*IE*/
    filter: flipv;
}

#bar-two {
    width: 50px;
    height: 25%;
    background: red;
    display: inline-block;
    -moz-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    transform: scaleY(-1);
    -ms-filter: flipv; /*IE*/
    filter: flipv;
}

#bar-three {
    width: 50px;
    height: 25%;
    background: red;
    display: inline-block;
    -moz-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    transform: scaleY(-1);
    -ms-filter: flipv; /*IE*/
    filter: flipv;
}

<div id="container">
    <div id="bar-one">50%</div>
    <div id="bar-two">25%</div>
    <div id="bar-three">25%</div>
</div>

Answer 3

HTML：

<div class="wrap">
    <div class="bars one">one</div>
    <div class="bars two">two</div>
    <div class="bars three">three</div>
</div>

CSS：

html
{
    height: 100%;
}

body
{
    margin: 0;
    background: #000;
    height: 100%;
}

.wrap
{
   width: 40%;
   position: absolute;
   bottom: 0;
   left: 0;
   height: 100%;
}

.bars
{
    width: 10%;
    position: absolute;
    bottom: 0;
    background: red;
}

.one
{
    height: 50%;
    left: 0;
}

.two
{
    left: 15%;
}

.three
{
    left: 30%;
}

.two, .three
{
    height: 25%;
}

小提琴：http://jsfiddle.net/pj7knkup/5/

没有css3（完全支持浏览器）。

Answer 4

根据您的具体情况，您可能会使用margin-top和vertical-align解决此问题，请参阅此jsfiddle。重要的是，margin-top和height的总和应该总计为100%。

<强> HTML：

<div class="container">
    <div class="first">f</div>
    <div class="second">s</div>
    <div class="third">t</div>
</div>

<强> CSS：

.container {
    width: 200px;
    height: 200px;
    background-color: black;
}

.first, .second, .third {
    display: inline-block;
    width: 50px;
    background-color: red;
    vertical-align: bottom;
}

.first {
    height: 75%;
    margin-top: 25%;
}

.second {
    height: 50%;
}

.third {
    height: 25%;
}

Answer 5

一个简单的解决方案是将包装器div转换（旋转）180度，并将所有内部div设置为向右浮动。

css：

.wrapper-div{
float: right;
position: relative;
transform: rotate(180deg);

}