간단한 html divs 라이닝 "bug"

Question

그래서이 다소 이상한 문제가 있습니다. 일부 divs을 나열하려고하는데이 이상한 문제가 생겼습니다. 내가 div 안에 <input type="checkbox" />을 넣고 다른 div와 같은 줄에 줄을 그다지 시도하지 않는다면 어떻게 되겠습니까?하지만 두 번째 div에 텍스트를 추가하면 갑자기 왜 시작됩니까? 그게 일어난거야? 당신이 display: inline-block를 사용할 때마다 항상도 (당신이 원하는에 따라 또는 bottom) vertical-align: top를 지정하는 것이 좋습니다 http://jsfiddle.net/wxgVw/2/

<div id="container"> 
    <div id="container2"> 
     <div id="left"> 
      <input type="checkbox" /> 
     </div> 
     <div id="right"> 

     </div> 
    </div> 
</div> 

body{ 
    margin:50px; 
} 

#container{ 
    width:770px; 
    height:400px; 
    border:1px solid red; 
} 

#container2{ 
    width:700px; 
    height:50px; 
    margin:10px; 
    outline:1px solid red; 
    padding:10px; 
} 

#left{ 
    width:30px; 
    height:30px; 
    outline:1px solid green; 
    display:inline-block; 
    zoom:1; 
    *display:inline; 
} 

#right{ 
    width:400px; 
    height:30px; 
    outline:1px solid black; 
    display:inline-block; 
    zoom:1; 
    *display:inline; 
} 

Answer 1

: 여기

조금 명확하게 일을하게하려면 코드의 예입니다. 그것은이 문제를 예방할 것입니다.

Answer 2

float 속성을 사용할 수도 있습니다. 두 div를 왼쪽으로 띄우고 오버 플로우 : 숨김이 위의 컨테이너로 설정되어 부동 문제가 발생하지 않도록하십시오. http://jsfiddle.net/wxgVw/4/

#container2{ 
    width:700px; 
    height:50px; 
    margin:10px; 
    outline:1px solid red; 
    padding:10px; 
    overflow:hidden; 
} 

#left{ 
    width:30px; 
    height:30px; 
    outline:1px solid green; 
    float:left; 
} 

#right{ 
    width:400px; 
    height:30px; 
    outline:1px solid black; 
    float:left; 
}