停止浮动DIV从重叠

我正在开发一个纯CSS图类型的图。这是一个精简版本：jsfiddle。停止浮动DIV从重叠

正如你所看到的，一些浮动div互相重叠。如果你增加列表项的高度，它工作正常：jsfiddle。

问题是，我想保持高度小，我怎么能做到这一点，没有divs重叠他们是这样的？

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

来源

2015-02-08 Henrik Petterson

你试过'显示：block'或'显示：直列block'？ – leDominatre 2015-02-08 18:16:42

@DominatorX刚刚测试过它没有结果，也许我没有做到这一点，请随时尝试：http://jsfiddle.net/1m2e30rf/ – 2015-02-08 18:18:08

创造了空间替换您

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/

来源

2015-02-08 19:49:19 Magu

非常好，我的朋友！ – 2015-02-09 15:39:23

在我的情况下不起作用，仍然重叠，现在垂直位置也是错误的。我开始考虑表格定位。至少这是有效的。：D我将左边距添加到右边的div，它工作，但它是一个令人厌恶的解决方法。 CSS仍然是一个废话。 – inf3rno 2017-03-09 08:27:08

-1

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

来源

2015-02-08 18:34:35 Horray

不，我已经设置了“margin-top”，并且设置填充只会添加额外的空间，而不是实际解决重叠问题。随意尝试在小提琴中。 – 2015-02-08 18:37:54

我加了一个margin-bottom：25px;到#ratio_graph里清除由负利润率

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

来源

2015-02-08 19:01:11 Paige

不幸的是，降低列表项的高度仍然会显示此问题，请参阅：http://jsfiddle.net/7sonx666/1/ – 2015-02-08 19:06:44

所有您需要做的就是每次降低高度以清除时，增加边距底部你正在创建的空间http://jsfiddle.net/tcnz9528/ – Paige 2015-02-08 19:22:37

尝试性

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

我不得不围绕标签元素（第一个和最后一个）使用包装文本。

最后，需要修改颜色规则上的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>

来源

2015-02-08 20:42:00

停止浮动DIV从重叠

回答

相关问题