停止浮動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從重疊

回答

相關問題