html - 阻止 float DIV 重叠

Question

我正在开发一种纯 CSS 图表类型的图表。这是它的精简版:jsfiddle .

如您所见，一些 float 的 div 相互重叠。如果增加列表项的高度，效果很好:jsfiddle .

问题是我想保持较小的高度，我怎样才能在不让 div 重叠的情况下做到这一点？

HTML:

<div id="ratio">
             <div id="ratio_mid">
                <ul id="ratio_graph"><li class="ratio_val c50">X Comments</li><li class="c41"> </li><li class="c32"> </li><li class="c23"> </li><li class="c14"> </li><li class="c5"> </li><li class="c-4"> </li><li class="c-13"> </li><li class="c-22"> </li><li class="c-31"> </li><li class="ratio_val c-40">X Notes</li>      </ul>
             </div>
          </div>

CSS:

#ratio {
    float: left;
    width: 100%;
}
#ratio_mid {
    float: left;
    height: 50px;
    margin-top: 50px;
    width: 100%;
}
#ratio_graph li {
    border-bottom: 2px solid black;
    border-radius: 3px;
    border-top: 2px solid black;
    float: left;
    height: 46px;
    list-style: outside none none;
    padding: 0;
    width: 10px;
}
.ratio_val {
    border: 3px solid #000 !important;
    border-radius: 5px;
    font-weight: bold;
    height: 24px !important
    line-height: 23px;
    text-align: center;
    width: 100px !important;
}
.c-50 {background-color: rgb(255, 0, 0); margin-top:50px;}
.c-49 {background-color: rgb(252, 2, 0); margin-top:49px;}
...

Answer 1

替换你的

float: left;

与

display: inline-block;
position: relative;

和你的

margin-top: ...;

与

top: ...;

float :左；使您的元素显示:内联；在那个 margin-top 上效果不佳:CSS display: inline-block does not accept margin-top?但你可以使用 postion:relative;将您的元素移动到正确的位置。更新:http://jsfiddle.net/1m2e30rf/25/