css - CSS将所有div条浮动到底部

Question

我有 10 组 DIV 嵌套在父 DIV 中：

<div id="bar_block">
    <div class="bar bar1"></div>
    <div class="bar bar2"></div>
    <div class="bar bar3"></div>
    <div class="bar bar4"></div>
    <div class="bar bar5"></div>
    <div class="bar bar6"></div>
    <div class="bar bar7"></div>
    <div class="bar bar8"></div>
    <div class="bar bar9"></div>
    <div class="bar bar10"></div>
</div>

到目前为止，我已经使用了这个 CSS：

#bar_block {
    width:350px;
    height:75px;
}

.bar {
    border:1px solid #000;
    width:8%;
    float:left;
    margin-right:5px;
}

.bar1 {
    height:10%;
}

.bar2 {
    height:20%;
}

.bar3 {
    height:30%;
}

.bar4 {
    height:40%;
}

.bar5 {
    height:50%;
}

.bar6 {
    height:60%;
}

.bar7 {
    height:70%;
}

.bar8 {
    height:80%;
}

.bar9 {
    height:90%;
}

.bar10 {
    height:100%;
    margin:0;
}

我希望所有的酒吧都漂浮在左下方。绝对位置对我不起作用，因为所有的酒吧都会挤在一起。有任何想法吗？

Answer 1

尝试将容器和 div 的 CSS 更改为：

#bar_block {
    width:360px;
    height:75px;
    position:relative;
}

.bar {
    border:1px solid #000;
    width:24px;
    bottom:0;
    display:inline-block;
    margin-right:2px;
}

结合底部和像素宽度的内联块应该做到这一点。

jsFiddle 示例。