Float divs inside of Absolute div with Relative Parent

Question

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

<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 的顶部。 fiddle 中的弹出窗口为蓝色。然后在该弹出窗口中，我有一个未知数量的 div，它们是 float:left。我的问题是它们垂直堆叠而不是水平堆叠，我无法在蓝色 div 上定义宽度，因为它会改变。这似乎是因为绿色 div 的 "relative"，但如果我不使用它，我就无法将蓝色 div 正确地放在它上面。

我可以使用 position: fixed 和 negative top margin，但负边距非常恶心。不过，也许这是我唯一的选择。

有什么想法吗？

Answer 1

您可以尝试添加这个：

#popup{
    width: 100vw;
}

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

看到这个fiddle

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

#popup{
    display:flex;
}

看到这个fiddle

Answer 2

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

编辑

我喜欢 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+ */

Float divs inside of Absolute div with Relative Parent

Float divs inside of Absolute div with Relative Parent

html

css

css-position