在左邊增加一個div

Question

這甚至可能嗎？基本設置是右側的邊欄，其中有div元素。 單擊其中一個元素將添加一個「彈出」div，該元素應顯示在單擊元素的左側。彈出窗口包含可變數量的按鈕。 我只想使用CSS來設計它的樣式，所以我只需從我的腳本中添加正確的HTML元素，然後讓樣式表執行佈局。

• 我已經注意到邊欄元素中的彈出，絕對定位，但是我不能讓邊欄元素本身的縮放比彈出至少高。 （側欄元素的高度通常比彈出段的高度短）。
• 我試圖在元素之前放置彈出，並且使用絕對位置，但由於某種原因，如果我添加更多按鈕，彈出不會變寬，而是將它們向下溢出。
• 在彈出窗口上使用相對位置會使其留在側欄中的空白處。
• 浮動它弄亂了其他側欄元素的寬度。

側邊欄固定寬度。該彈出窗口是固定高度的。這些按鈕是固定大小的。側邊欄元素爲全角，但高度可變。

我已經失去了我嘗試過的所有不同事物的蹤跡。我目前最接近的嘗試是在這個JsFiddle，其中彈出位置正確，但不向左增長，只向下溢出。如果我將寬度設置爲很大的數字，它會正確地排列按鈕，但是如果我添加一個：hover僞類，會發生奇怪的事情。

這怎麼能在HTML/CSS中完成？或者只能使用JavaScript？如果是這樣，那麼做什麼可能是一種簡單的「偏離」方法？

Answer 1

添加white-space:nowrap;至div.popout。

這將防止按鈕之間的換行符。