在左边增加一个div

Question

这甚至可能吗？基本设置是右侧的边栏，其中有div元素。 单击其中一个元素将添加一个“弹出”div，该元素应显示在单击元素的左侧。弹出窗口包含可变数量的按钮。 我只想使用CSS来设计它的样式，所以我只需从我的脚本中添加正确的HTML元素，然后让样式表执行布局。

• 我已经注意到边栏元素中的弹出，绝对定位，但是我不能让边栏元素本身的缩放比弹出至少高。 （侧栏元素的高度通常比弹出段的高度短）。
• 我试图在元素之前放置弹出，并且使用绝对位置，但由于某种原因，如果我添加更多按钮，弹出不会变宽，而是将它们向下溢出。
• 在弹出窗口上使用相对位置会使其留在侧栏中的空白处。
• 浮动它弄乱了其他侧栏元素的宽度。

侧边栏固定宽度。该弹出窗口是固定高度的。这些按钮是固定大小的。侧边栏元素为全角，但高度可变。

我已经失去了我尝试过的所有不同事物的踪迹。我目前最接近的尝试是在这个JsFiddle，其中弹出位置正确，但不向左增长，只向下溢出。如果我将宽度设置为很大的数字，它会正确地排列按钮，但是如果我添加一个：hover伪类，会发生奇怪的事情。

这怎么能在HTML/CSS中完成？或者只能使用JavaScript？如果是这样，那么做什么可能是一种简单的“偏离”方法？

Answer 1

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

这将防止按钮之间的换行符。