位置/溢出/浮動css和div

<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，第二個框在第一個框的下方重新定位。我只是好奇它爲什麼這樣做，而不是把一個滾動條，並保持對象的位置。位置/溢出/浮動css和div

我說錯了，還是我以錯誤的方式思考這個問題。我幾乎試圖用一張桌子作爲佈局來嘗試這一點，但這對我來說似乎是非常直觀的。

來源

2012-10-11 Thao Nguyen