防止浮动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;}
...

- Henrik Petterson

---

你尝试过使用 display:block 或者 display:inline-block 吗？ - unbindall

@DominatorX 刚刚测试了一下，没有结果，可能是我做错了，你可以随意尝试：http://jsfiddle.net/1m2e30rf/ - Henrik Petterson

Answer 1

替换你的

float: left;

使用

display: inline-block;
position: relative;

并且你的

margin-top: ...;

使用

top: ...;

float: left; 使您的元素成为display: inline;，但是margin-top不起作用：CSS display: inline-block does not accept margin-top? 但是您可以使用position:relative;将您的元素移动到正确的位置。 更新： http://jsfiddle.net/1m2e30rf/25/

- Markus

---

在我的情况下不起作用，仍然重叠，现在垂直位置也不正确。我开始考虑表格定位。至少那样可以工作。:D 我给右侧div添加了左边距，它可以工作，但这是一个恶心的解决方法。CSS仍然是一坨屎。 - inf3rno

Answer 2

我在 #ratio_graph li 中添加了 margin-bottom:25px; 以清除负边距所创建的空间。

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;
}

- Paige

---

不幸的是，将列表项的高度降低仍然会显示此问题，请参见：http://jsfiddle.net/7sonx666/1/。 - Henrik Petterson

你只需要在每次降低高度以清除所创建的空间时增加 margin-bottom。http://jsfiddle.net/tcnz9528/ - Paige

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>

- Marc Audet

Answer 4

你必须为你的盒子设置填充或边距。

- Horray

---

不需要。我已经设置了“margin-top”，设置填充只会添加额外的空间，而不是真正解决重叠问题。可以在fiddle中尝试。 - Henrik Petterson