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的顶部。小提琴中的弹出窗口是蓝色的。然后在弹出窗口内，我有一个未知数量的div，它们是float：left。我的问题是它们是垂直堆叠而不是水平堆叠，我无法在蓝色div上定义宽度，因为它会发生变化。这似乎是因为＆＃34;亲戚＆＃34;绿色div，但如果我不使用它，我就不能正确地将蓝色div放在它上面。

我可以使用头寸：固定和负上边距，但负边距相当粗略。也许这是我唯一的选择。

有什么想法吗？

Answer 1

您可以尝试添加此内容：

#popup{
    width: 100vw;
}

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

请参阅此fiddle

另一种方式可能是：

#popup{
    display:flex;
}

请参阅此fiddle

Answer 2

您的#base的固定宽度为30px，这会迫使其中的任何内容达到MOST 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+ */

使用Relative Parent在Floolute div中浮动div

2 个答案: