顛簸浮塊向上或向下排隊

我缺乏更好的詞來形容我的問題，這使我無法正確地研究問題。但是，我可以描述它。顛簸浮塊向上或向下排隊

以下是我目前爲止的結果。有問題的元素將駐留在表格單元格中，具有大量數據的表格中。藍色的項目是我想要水平移動的div元素，以便它們的左邊框顯示元素的「值」。在下面的示例中，相對於整個單元格寬度，值顯示在括號中。元素的寬度是流暢的，因爲元素將包含不同長度的文本。

enter image description here

（在http://i.stack.imgur.com/11Iy7.png見圖像）

這是用下面的代碼得到：

td.singleton {display: table-cell; } 
td.singleton > div {display: inline-block; background-color: blue; clear: both; float:left} 

<tr class="level2"><td>&nbsp;</td><td colspan="7" class="singleton"> 
     <div style="margin-left: 12%">Item 1 (.12)</div> 
     <div style="margin-left: 23%">Item 2 (.23)</div> 
     <div style="margin-left: 40%">Item 3 (.40)</div> 
     <div style="margin-left: 80%">Item 4 (.80)</div> 
</td><td></td><td></td></tr>

目前，上述工作正常和數據是可讀的。但是，我想四個「線」壓實兩個，如下：

enter image description here

（在http://i.stack.imgur.com/l9Pyv.png見圖像）

在這裏，元件被繪製在最上面的線，只要因爲它們並不位於先前的元素之上;在這種情況下，這個元素被「撞倒」了一條線。 html的生成是在Python中完成的，所以作爲最後的手段，可以確定手動使用哪一行而不是讓瀏覽器決定。

現在有兩方面的問題：

你會如何形容我的問題只有寥寥數語，這樣我就可以進一步調查？
這可能使用CSS？

在此先感謝您。

來源

2011-08-06 MrGumble

我會形容這是「垂直浮動」。 – LaC

~~我不認爲你可以在CSS中實現這一點。你最好在Python中做這種情報...~~

在你再次閱讀你的問題，並使用你提供的代碼（並使字體顏色變成白色）後，我發現，你可能會站在通過玩位置的機會。第一步可能是使div絕對定位...

來源

2011-08-06 17:46:06

不可能只用css。你需要js。我建議jQuery http://jquery.com/ 您需要跟蹤元素http://api.jquery.com/position/的位置，然後檢查下一個元素的位置是否會導致疊加。

至於CSS有很多方法......如果你只想要一個div集合，試試位置：absolute;在每個人和使用頂部和左側，而不是邊距（父母必須有位置：相對）。

你也可以嘗試將每一行包裝在一個單獨的div中，但是你可能會在沒有這樣做的情況下離開。

單獨註釋 - 如果元素左右空白（或者在我的場景中留下）會超過總寬度 - 元素寬度，那麼元素將發生什麼？定位在95％的元素的外觀如何？

來源

2011-08-06 17:47:54 Zhenya

對單獨註釋的迴應;我也在思考這個問題，並且我學習到了任何一種方式：右邊界將溢出到表格單元的右邊，這樣值仍然可以被讀取，但是它會打破審美價值。另一方面，精度並不是很重要，因此元素最終會與右邊對齊。 – MrGumble

我也想過一些關於絕對定位，並設置頂級屬性（正如@William所述），但據我瞭解 - 如果我設置頂級屬性，那麼元素將停留在那裏，而不是「向上浮動」。 – MrGumble

如果你的數據是動態的CSS單獨不會做到這一點，你需要JavaScript來進行計算，並相應地爲絕對定位的元素分配'頂部'（和'左'）。沒有'浮動'。他們的父母必須擁有相對的位置。 – Zhenya

顛簸浮塊向上或向下排隊

回答

相關問題