在具有相对父级的绝对 div 内浮动 div

Question

我找不到任何重复的，所以这里......

http://jsfiddle.net/bmyLru9w/

<div style="height: 200px; width: 200px; background-color:#ff0000"></div>
<div id="base" style="height: 30px; width: 30px; background-color:#00ff00">
    <div id="popup">
        <div>
        <div class="in-pop"></div>
        <div class="in-pop"></div>
        <div class="in-pop"></div>
            <div class="in-pop"></div></div>
    </div>
</div>

.in-pop{
    background-color:#ffff00;
    width: 20px;
    height: 20px;
    border: 1px solid #000;
    float: left;
}

#base{
    position:relative;
}

#popup{
    background-color:#0000ff;
    position:absolute;
    bottom: 30px;
}

我的内容底部有一个 div（绿色）。我需要一个弹出窗口（用于悬停）放置在该绿色 div 的顶部。弹出窗口在小提琴中是蓝色的。然后在那个弹出窗口中，我有一个未知数量的 div 是 float:left。我的问题是它们垂直堆叠而不是水平堆叠，我无法在蓝色 div 上定义宽度，因为它会发生变化。这似乎是因为绿色 div 的“相对”而发生的，但是如果我不使用它，我就无法将蓝色 div 正确定位在它上面。

我可以使用 position: fixed 和negative top margin，但是负边距是相当严重的。不过，也许这是我唯一的选择。

有什么想法吗？

Answer 1

你可以试试添加这个：

#popup{
    width: 100vw;
}

这将使蓝色 div 始终是视口的宽度，以便您的项目可以像您期望的那样浮动。

看到这个fiddle

另一种方式可能是这样的：

#popup{
    display:flex;
}

看到这个fiddle

Answer 2

您的#base 具有 30px 的固定宽度，这会强制其中的任何内容为最多 30px 宽。

编辑

我喜欢 zgood 使用 Flexbox 提供的解决方案。以下是如何设置 flex 使其在大多数浏览器中都能正常工作：

display : -webkit-box;   /* OLD - iOS 6-, Safari 3.1-6 */
display : -moz-box;      /* OLD - Firefox 19- (doesn't work very well) */
display : -ms-flexbox;   /* TWEENER - IE 10 */
display : -webkit-flex;  /* NEW - Chrome */
display : flex;          /* NEW, Spec - Opera 12.1, Firefox 20+ */