HTML/CSS - 내용에 따라 div를 만드는 방법은 무엇입니까?

Question

2 개의 div가 나란히 있습니다.

첫 번째 div에는 두 개의 레이블이 나란히 있고 하나의 입력 텍스트가 아래에 있습니다. 레이블 중 하나는 오류 정보입니다. 경우에 따라 때때로 표시됩니다. 표시되지 않을 때 div 크기를 작게하여 두 번째 div가 더 가깝도록 할 수 있습니다.

두 번째 것은 레이블 div가 하나만있는 것을 제외하고는 똑같은 것이므로 크기 조정이 필요하지 않습니다.

내가 원하는 것을 얻을 수있는 방법이 있습니까?

이 코드입니다 : 나는 아래 acahieve 싶은의 놀랍도록 그려 예제가있다.

<div id="main-div"> 
<div id="address-number-div"> 
    <label>Number</label> 
    <label class="error" id="number-error">Empty Field</label> 
    <input id="number-input" onfocus="onfocus('number-error')"/> 
</div> 

<div id="address-complement-div"> 
    <label>Complement</label> 
    <input id="complement-input" /> 
</div> 

및 CSS

:

div {border: 1px solid #000000; padding: 5px;} 

.error{color:#FF0000; margin-left:5px;} 

#main-div div {display:inline-block;} 

#main-div input {display:block;} 

#number-input { 
    width: 16%; 
}​ 

Answer 1

이 부분을보십시오 DEMO.

왼쪽 div를 플로팅하면이 문제가 해결됩니다.

Answer 2

는 그들을 내용에 맞게 축소 있도록 display: inline-block;로 설정합니다.

Answer 3

는 width<persentage> 유형 값을 제공 <length>을 포기하지 마십시오 :

#number-input { width: 24px; }​ 

이 my fiddle에 당신의 코드를 참조하십시오.