停止浮动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: ...;

float：left;使你的元素成为一个显示：内联;并且在那个边缘上不起作用：CSS display: inline-block does not accept margin-top? 但你可以使用postion：relative;将您的元素移动到正确的位置。 更新：http://jsfiddle.net/1m2e30rf/25/

Answer 2

我添加了一个保证金底部：25px;到#ratio_graph li来清除由负边距创建的空间

http://jsfiddle.net/7sonx666/

#ratio_graph li {
  border-bottom: 2px solid black;
  border-radius: 3px;
  border-top: 2px solid black;
  float: left;
  height: 23px;
  list-style: outside none none;
  padding: 0;
  width: 10px;
  margin-bottom: 25px;
}

Answer 3

暂定解决方案

这里引人入胜的小问题！我构建了一个解决方案，涉及在“点符号”元素上使用伪元素。

我必须在标签元素周围使用包装文本（第一个和最后一个）。

最后，需要修改颜色规则上的CSS选择器。

有点复杂，可能不健壮，但我试了一下。在Firefox中似乎没问题。

#ratio {
    float: left;
    width: 100%;
}
#ratio_mid {
    float: left;
    height: 50px;
    margin-top: 50px;
    width: 100%;
}
#ratio_graph li {
    float: left;
    height: 150px;
    list-style: outside none none;
    padding: 0;
    margin-left: 0px;
    width: 10px;
}
#ratio_graph li:after {
    content: '\A0';
    display: block;
    border-bottom: 2px solid black;
    border-radius: 3px;
    border-top: 2px solid black;
    height: 10px;
}
#ratio_graph li.ratio_val {
    width: 150px;
}
#ratio_graph li.ratio_val div {
    border: 3px solid #000;
    border-radius: 5px;
    font-weight: bold;
    text-align: center;
    width: auto;
    height: auto;
    box-sizing: border-box;
}
#ratio_graph li.ratio_val:after {
    display: none;
}
.c-50 {background-color: rgb(255, 0, 0); margin-top:50px;}
.c-49 {background-color: rgb(252, 2, 0); margin-top:49px;}
.c-48 {background-color: rgb(249, 5, 0); margin-top:48px;}
.c-47 {background-color: rgb(247, 7, 0); margin-top:47px;}
.c-46 {background-color: rgb(244, 10, 0); margin-top:46px;}
.c-45 {background-color: rgb(242, 12, 0); margin-top:45px;}
.c-44 {background-color: rgb(239, 15, 0); margin-top:44px;}
.c-43 {background-color: rgb(237, 17, 0); margin-top:43px;}
.c-42 {background-color: rgb(234, 20, 0); margin-top:42px;}
.c-41 {background-color: rgb(232, 22, 0); margin-top:41px;}
.c-40 {background-color: rgb(229, 25, 0); margin-top:40px;}
.c-39 {background-color: rgb(226, 28, 0); margin-top:39px;}
.c-38 {background-color: rgb(224, 30, 0); margin-top:38px;}
.c-37 {background-color: rgb(221, 33, 0); margin-top:37px;}
.c-36 {background-color: rgb(219, 35, 0); margin-top:36px;}
.c-35 {background-color: rgb(216, 38, 0); margin-top:35px;}
.c-34 {background-color: rgb(214, 40, 0); margin-top:34px;}
.c-33 {background-color: rgb(211, 43, 0); margin-top:33px;}
.c-32 {background-color: rgb(209, 45, 0); margin-top:32px;}
#ratio_graph li.c-31:after {background-color: rgb(206, 48, 0); margin-top:31px;}
.c-30 {background-color: rgb(204, 51, 0); margin-top:30px;}
.c-29 {background-color: rgb(201, 53, 0); margin-top:29px;}
.c-28 {background-color: rgb(198, 56, 0); margin-top:28px;}
.c-27 {background-color: rgb(196, 58, 0); margin-top:27px;}
.c-26 {background-color: rgb(193, 61, 0); margin-top:26px;}
.c-25 {background-color: rgb(191, 63, 0); margin-top:25px;}
.c-24 {background-color: rgb(188, 66, 0); margin-top:24px;}
.c-23 {background-color: rgb(186, 68, 0); margin-top:23px;}
#ratio_graph li.c-22:after {background-color: rgb(183, 71, 0); margin-top:22px;}
.c-21 {background-color: rgb(181, 73, 0); margin-top:21px;}
.c-20 {background-color: rgb(178, 76, 0); margin-top:20px;}
.c-19 {background-color: rgb(175, 79, 0); margin-top:19px;}
.c-18 {background-color: rgb(173, 81, 0); margin-top:18px;}
.c-17 {background-color: rgb(170, 84, 0); margin-top:17px;}
.c-16 {background-color: rgb(168, 86, 0); margin-top:16px;}
.c-15 {background-color: rgb(165, 89, 0); margin-top:15px;}
.c-14 {background-color: rgb(163, 91, 0); margin-top:14px;}
#ratio_graph li.c-13:after {background-color: rgb(160, 94, 0); margin-top:13px;}
.c-12 {background-color: rgb(158, 96, 0); margin-top:12px;}
.c-11 {background-color: rgb(155, 99, 0); margin-top:11px;}
.c-10 {background-color: rgb(153, 102, 0); margin-top:10px;}
.c-9 {background-color: rgb(150, 104, 0); margin-top:9px;}
.c-8 {background-color: rgb(147, 107, 0); margin-top:8px;}
.c-7 {background-color: rgb(145, 109, 0); margin-top:7px;}
.c-6 {background-color: rgb(142, 112, 0); margin-top:6px;}
.c-5 {background-color: rgb(140, 114, 0); margin-top:5px;}
#ratio_graph li.c-4:after {background-color: rgb(137, 117, 0); margin-top:4px;}
.c-3 {background-color: rgb(135, 119, 0); margin-top:3px;}
.c-2 {background-color: rgb(132, 122, 0); margin-top:2px;}
.c-1 {background-color: rgb(130, 124, 0); margin-top:1px;}
.c0 {background-color: rgb(127, 127, 0); margin-top:0px;}
.c1 {background-color: rgb(124, 130, 0); margin-top:-1px;}
.c2 {background-color: rgb(122, 132, 0); margin-top:-2px;}
.c3 {background-color: rgb(119, 135, 0); margin-top:-3px;}
.c4 {background-color: rgb(117, 137, 0); margin-top:-4px;}
#ratio_graph li.c5:after {background-color: rgb(114, 140, 0); margin-top:-5px;}
.c6 {background-color: rgb(112, 142, 0); margin-top:-6px;}
.c7 {background-color: rgb(109, 145, 0); margin-top:-7px;}
.c8 {background-color: rgb(107, 147, 0); margin-top:-8px;}
.c9 {background-color: rgb(104, 150, 0); margin-top:-9px;}
.c10 {background-color: rgb(102, 153, 0); margin-top:-10px;}
.c11 {background-color: rgb(99, 155, 0); margin-top:-11px;}
.c12 {background-color: rgb(96, 158, 0); margin-top:-12px;}
.c13 {background-color: rgb(94, 160, 0); margin-top:-13px;}
#ratio_graph li.c14:after {background-color: rgb(91, 163, 0); margin-top:-14px;}
.c15 {background-color: rgb(89, 165, 0); margin-top:-15px;}
.c16 {background-color: rgb(86, 168, 0); margin-top:-16px;}
.c17 {background-color: rgb(84, 170, 0); margin-top:-17px;}
.c18 {background-color: rgb(81, 173, 0); margin-top:-18px;}
.c19 {background-color: rgb(79, 175, 0); margin-top:-19px;}
.c20 {background-color: rgb(76, 178, 0); margin-top:-20px;}
.c21 {background-color: rgb(73, 181, 0); margin-top:-21px;}
.c22 {background-color: rgb(71, 183, 0); margin-top:-22px;}
#ratio_graph li.c23:after {background-color: rgb(68, 186, 0); margin-top:-23px;}
.c24 {background-color: rgb(66, 188, 0); margin-top:-24px;}
.c25 {background-color: rgb(63, 191, 0); margin-top:-25px;}
.c26 {background-color: rgb(61, 193, 0); margin-top:-26px;}
.c27 {background-color: rgb(58, 196, 0); margin-top:-27px;}
.c28 {background-color: rgb(56, 198, 0); margin-top:-28px;}
.c29 {background-color: rgb(53, 201, 0); margin-top:-29px;}
.c30 {background-color: rgb(50, 204, 0); margin-top:-30px;}
.c31 {background-color: rgb(48, 206, 0); margin-top:-31px;}
#ratio_graph li.c32:after {background-color: rgb(45, 209, 0); margin-top:-32px;}
.c33 {background-color: rgb(43, 211, 0); margin-top:-33px;}
.c34 {background-color: rgb(40, 214, 0); margin-top:-34px;}
.c35 {background-color: rgb(38, 216, 0); margin-top:-35px;}
.c36 {background-color: rgb(35, 219, 0); margin-top:-36px;}
.c37 {background-color: rgb(33, 221, 0); margin-top:-37px;}
.c38 {background-color: rgb(30, 224, 0); margin-top:-38px;}
.c39 {background-color: rgb(28, 226, 0); margin-top:-39px;}
.c40 {background-color: rgb(25, 229, 0); margin-top:-40px;}
#ratio_graph li.c41:after {background-color: rgb(22, 232, 0); margin-top:-41px;}
.c42 {background-color: rgb(20, 234, 0); margin-top:-42px;}
.c43 {background-color: rgb(17, 237, 0); margin-top:-43px;}
.c44 {background-color: rgb(15, 239, 0); margin-top:-44px;}
.c45 {background-color: rgb(12, 242, 0); margin-top:-45px;}
.c46 {background-color: rgb(10, 244, 0); margin-top:-46px;}
.c47 {background-color: rgb(7, 247, 0); margin-top:-47px;}
.c48 {background-color: rgb(5, 249, 0); margin-top:-48px;}
.c49 {background-color: rgb(2, 252, 0); margin-top:-49px;}
.c50 {background-color: rgb(0, 255, 0); margin-top:-50px;}

<div id="ratio">
  <div id="ratio_mid">
    <ul id="ratio_graph">
      <li class="ratio_val">
        <div class="c50">X Comments</div>
      </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">
        <div class="c-40">X Notes</div>
      </li>
    </ul>
  </div>
  <!-- END #ratio_mid -->
</div>

Answer 4

您必须为您拥有的框设置填充或边距。