Question

我有一个围绕多个div的div。父div的边界不覆盖所有子div，如小提琴中所示。谁能说出这里的问题是什么？

<div style="border:1px dashed gray;">
    <div style="position:relative;top:10px;"><input type="text" placeholder="https://" /></div>
    <div style="position:relative;top:30px;"><input type="text" placeholder="https://" /></div>
    <div style="position:relative;top:50px;font-size: 10px">Some content</div>
    <div style="position:relative;top:60px;background-color:#E6E0EC">
        <div class="glyphicon glyphicon-remove"></div>
    </div>
</div>

JSFiddle link

Answer 1

您在未被边框包围的div上使用position: relative。相对位置属性移动元素的内容，但保留元素的保留空间在正常流中。

如果要实现相同的布局，并且边框周围最好使用margin属性。我更新了你的jsfiddle以显示一个例子

JsFiddle

Answer 2

在这种情况下，使用top指定间距不是一个好主意。它会很脆弱。让元素为自己腾出空间，让盒子模型在父母中腾出空间。为此，请使用margin-top。

小提琴：http://jsfiddle.net/markm/rmvneo88/

Answer 3

在所有子div中，不需要位置相对，只需删除这些标记。

Div边界不包括所有儿童div

3 个答案: