向左边增加一个div

Question

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

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

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

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

如何在HTML / CSS中完成？或者只能使用JavaScript？如果是这样，这可能是一种简单的“偏僻”方法吗？

Answer 1

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

这可以防止按钮之间的换行。