작은 DIV에 2 개의 DIV가 나란히 나란히

Question

오버플로가있는 더 작은 DIV 안에 두 개의 DIV가 나란히 놓 이려고합니다. 두 DIV가 나란히있을 것으로 예상되며 일부는 너비가 더 작은 부모 DIV에 의해 숨겨진 콘텐츠로 표시됩니다. 대신 마지막 DIV는 다른 DIV에서도 움직입니다. 둘 다 float : left;가 있습니다.

HTML :

<div id="wrapper"> <!-- wrapper --> 
    <div id="nav"> <!-- nav --> 

    </div> <!-- /nav --> 
    <div id="container"> <!-- container --> 

    </div> <!-- /container --> 
</div> <!-- /wrapper --> 

CSS :

#wrapper { 
    float:left; 
    height:960px; 
    width:540px; 
    background-color:#eeeeee; 
    overflow:hidden; 
} 

#nav { 
    float:left; 
    width:460px; 
    height:960px; 
    background-color:red; 
} 

#container { 
    float:left; 
    width:540px; 
    height:960px; 
    background-color:green; 
} 

이 내가 원하는 효과는 다음과 같습니다

Answer 1

당신이 두 가지 요소가 나란히, 당신이 둘러싸고 어떤 종류의 추가 "래퍼"요소를 추가 할 수 있다고 생각합니다 당신의 #nav 및 #container 요소. (당신이 요소가 서로 옆에 볼 수 있도록 오버 플로우가 자동으로 설정합니다.)

예 :

#wrapper { 
 
    float: left; 
 
    height: 960px; 
 
    width: 540px; 
 
    background-color: #eeeeee; 
 
    overflow: auto; 
 
} 
 
#wrap { 
 
    width: 1000px; 
 
} 
 
#nav { 
 
    float: left; 
 
    width: 460px; 
 
    height: 960px; 
 
    background-color: red; 
 
    clear: 
 
} 
 
#container { 
 
    float: left; 
 
    width: 540px; 
 
    height: 960px; 
 
    background-color: green; 
 
}

<div id="wrapper"> 
 
    <!-- wrapper --> 
 
    <div id="wrap"> 
 
    <!-- some new wrapping element --> 
 
    <div id="nav"> 
 
     <!-- nav --> 
 

 
    </div> 
 
    <!-- /nav --> 
 
    <div id="container"> 
 
     <!-- container --> 
 

 
    </div> 
 
    <!-- /container --> 
 
    </div> 
 
</div> 
 
<!-- /wrapper -->

Answer 2

나는 아이 display: inline-block를 사용하여, 포장을 방지 좋을 것 <div> 요소를 사용하고컨테이너에:

#wrapper { 
 
    float: left; 
 
    height: 300px; 
 
    width: 300px; 
 
    background-color: #eeeeee; 
 
    overflow: hidden; 
 
    /* prevents content wrapping to a new line */ 
 
    white-space: nowrap; 
 
} 
 
#nav { 
 
    display: inline-block; 
 
    width: 400px; 
 
    height: 960px; 
 
    background-color: red; 
 
    /* purely to move the first element to the left, 
 
    to show that both elements are on the same line: */ 
 
    margin-left: -200px; 
 
} 
 
#container { 
 
    display: inline-block; 
 
    width: 400px; 
 
    height: 960px; 
 
    background-color: green; 
 
}

<div id="wrapper"> 
 
    <!-- wrapper --> 
 
    <div id="nav"> 
 
    <!-- nav --> 
 

 
    </div> 
 
    <!-- /nav --> 
 
    <div id="container"> 
 
    <!-- container --> 
 

 
    </div> 
 
    <!-- /container --> 
 
</div> 
 
<!-- /wrapper -->