html – 停止浮动DIV重叠

概述我正在开发一个纯CSS图表类型的图形.这是它的精简版： jsfiddle. 如您所见,一些浮动div相互重叠.如果您增加列表项的高度,它可以正常工作：jsfiddle. 问题是我想保持高度小,我怎么能这样做而没有div与他们的方式重叠？ HTML： <div id="ratio"> <div id="ratio_mid"> <ul id=" 我正在开发一个纯CSS图表类型的图形.这是它的精简版： @L_502_0@.

如您所见,一些浮动div相互重叠.如果您增加列表项的高度,它可以正常工作：jsfiddle.

问题是我想保持高度小,我怎么能这样做而没有div与他们的方式重叠？

HTML：

<div ID="ratio">             <div ID="ratio_mID">                <ul ID="ratio_graph"><li >X Comments</li><li > </li><li > </li><li > </li><li > </li><li > </li><li > </li><li > </li><li > </li><li > </li><li >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); margin-top:50px;}.c-49 {background-color: rgb(252,2,0); margin-top:49px;}...

解决方法 替换你的

float: left;

同

display: inline-block;position: relative;

和你的

margin-top: ...;

同

top: ...;

向左飘浮;使你的元素成为一个显示：内联;并且在那个边缘顶部不能很好地工作：CSS display: inline-block does not accept margin-top?
但你可以使用postion：relative;将您的元素移动到正确的位置.
更新：http://jsfiddle.net/1m2e30rf/25/

总结

以上是内存溢出为你收集整理的html – 停止浮动DIV重叠全部内容，希望文章能够帮你解决html – 停止浮动DIV重叠所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。