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

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

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

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

内联块与底部和像素宽度相结合应该可以做到。

<强> jsFiddle example

CSS将所有div的条形图浮动到底部

1 个答案: