停止浮动DIV重叠

Question

我正在开发纯CSS图类型的图。这是它的精简版本：jsfiddle。

如您所见，一些浮动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: ...;

向左飘浮; 使元素显示：内联；并且在该页边空白处效果不佳：CSS显示：内联块不接受页边空白？ 但您可以使用postion：relative; 将元素移到正确的位置。更新：http : //jsfiddle.net/1m2e30rf/25/