div에서 div가 2 개 배치 된 경우

Question

주 div의 너비가 100 %이고 div가 2 개 있습니다. 하나는 200px 너비이고 다른 하나는 100 % -200px입니다.

-----------------this is main div ------------- 
|            | 
| ----subdiv1---- -------------subdiv2----------| 
||    | |       || 
| -------------- ---------------------------- | 
|-----------------------------------------------| 

subdiv1은 200 픽셀이고, subdiv2의 너비는 나머지 빈 공간입니다. Google에서 검색하지만 찾을 수 없습니다. http://jsfiddle.net/P4xMj/

예 HTML :

<div id="container"> 
    <div id="left"> 
     Some content here 
    </div> 
    <div id="right"> 
     Some more content goes over here on the right. Let's make this 
     content really long to see what happens when we wrap more than 
     one or two line's worth. Extra text to fill the void. 
    </div> 
</div> 

예 CSS합니다 (

Answer 1

여기에 내가 가장 왼쪽 사업부에 대한 float: left 규칙을 사용하여 해킹 하나 개의 가능한 솔루션, 오른쪽 사업부의 margin-left 규칙입니다 배경색은 표시 여부를 나타냅니다.) :

#container { 
    background: #FF0; 
    overflow: auto; 
    padding: 10px; 
} 

#left { 
    background: #0F0; 
    float: left; 
    width: 200px; 
} 

#right { 
    background: #F00; 
    margin-left: 210px; 
} 

Answer 2

너는 float:left;을 요에 추가하려고합니다. ur subdiv1. 여기에 표시 한 코드를 생성하는 몇 줄의 코드가 있습니다. 짧은에서

<div> 
    <div style="float:left;width:200px;background:#0F0"> 
    SUBDIV1 
    </div> 
    <div style="background:#F00;"> 
    SUBDIV2 
    </div> 
</div> 

사용 float:left; 당신의 subdiv1

Answer 3

왼쪽 divfloat: left, 오른쪽 div에 margin-left: 200px을 가질 수 있습니다.

http://jsfiddle.net/SpxH9/

HTML :

<div id="container"> 
    <div id="left">left</div> 
    <div id="right">right</div> 
</div> 

CSS :

#container { 
    overflow: hidden; 
} 
#left { 
    float: left; 
    width: 200px; 
} 
#right { 
    margin-left: 200px; 
} 

margin-leftwith overflow: hidden을 대체하는 것입니다 당신이 사용할 수있는 또 다른 방법이있다. 이 기능은 2D에 치수를 두 번 가질 필요가 없기 때문에 유용하며 변경 사항을보다 쉽게 ​​적용 할 수 있습니다. 당신은 내가 언급 한 첫 번째 기술과 같은 일을하려고하면 http://jsfiddle.net/SpxH9/1/

#container { 
    overflow: hidden; 
} 
#left { 
    float: left; 
    width: 200px; 
} 
#right { 
    overflow: hidden; 
} 

, 당신은 수동으로 물건을 계산해야한다는 찾을 수 있습니다 : 10px 테두리 예를 들어

, http://jsfiddle.net/SpxH9/2/을 (그리고 고정 : http://jsfiddle.net/SpxH9/3/)

마지막으로, 위의 overflow: hidden은 부동 소수점을 포함하는 데 사용됩니다. 대신 clearfix을 사용할 수 있습니다.