Question

<html>
<head>

<style type="text/css">

.parent
{
    width: auto;
    height: auto;
    min-width: 600px;
    min-height: 600px;
    border: 1px dashed #f00;
    padding: 5px;
    overflow: auto;
    position: absolute;
}

.child
{
    width : 100px;
    height: 500px;
    border: 1px solid #0f0;
    float: left;
    position: relative;
}
.second_child
{
    width : 1800px;
    height: 100px;
    border: 1px solid black;
    float: left;
    position:relative;
}
</script>

</style>

</head>

<body style="overflow:auto">

<div class="parent">
    <div class="child">
    </div>
    <div class="second_child">
    </div>
</div>
</body>
</html>

我试图把两个盒子放在一个更大的盒子里。我把它拿到了彼此旁边，如果我将第二个盒子宽度扩大到大于窗口的宽度，它现在工作正常。示例您的屏幕是1024x720，第二个框的宽度是1800px第二个框重新定位在第一个框下面。我只是好奇它为什么这样做而不是放置滚动条并保持对象的位置。

我说错了，还是我以错误的方式思考这个问题。我几乎想尝试用一张桌子作为布局，但这对我来说似乎很直观。

Answer 1

这是浮动DOM元素的本质。他们不强迫任何东西。如果您希望它们并排放置，则需要为容器提供宽度以支持内容（＆gt; 1904px）。

Answer 2

我只是好奇它为什么这样做而不是放一个滚动条并保持物体的位置。

您可以将.parent设置为overflow: scroll;以强制执行此操作。

位置/溢出/浮动css和div

2 个答案: