위치/오버플로/플로트 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