html - 向左增长一个div

Question

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

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

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

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

如何在 HTML/CSS 中做到这一点？还是只能使用 JavaScript？如果是这样，执行此操作的简单“偏僻”方法可能是什么？

Answer 1

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

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