인라인 블록 요소가 예상대로 표시되지 않습니다.

Question

스타일 시트를 쓰고 있는데, 상대 레이아웃으로 컨테이너 내에 가로로 세 개의 요소 (너비 = 33 %)를 표시하려고합니다. 다음은 코드입니다 :

#container 
{ 
    margin:auto; 
    width:85%; 
    padding:0; 
} 
#element 
{ 
    display:inline-block; 
    width:33.3%; 
    margin-left:0; 
    margin-right:0; 
    border:0px; 
    text-align:center; 
    } 

이해하지 않는 이유 세 가지 요소 :

<div id="container"> 
<div id="element">hi</div> 
<div id="element">every</div> 
<div id="element">one</div> 
</div> 

나는 그들이 동일한에 그려진 것이라고 생각하면서 마지막 요소는, 처음 두 아래에 표시됩니다 선. 여백, 패딩 또는 경계선이 없습니다. 너비를 32 %로 설정하면 전체 브라우저 창에서 동일한 행 (작동)이지만 브라우저 창 너비를 줄이면 마지막 요소가 새 줄에 나옵니다. 왜 이런 일이 발생하는지 아는 사람이 있습니까?

Answer 1

이들은 인라인 블록이므로 문자처럼 레이아웃됩니다. 그리고 당신의 경우에는 그들 사이에 공백이있어서 공백이 렌더링의 인라인 블록 사이의 줄에 하나의 공백이됩니다. 당신은 당신이 그들에 국경을 두는 경우에 이것을 볼 수있다. 따라서이 세 공간 모두가 차지하는 공간은 "컨테이너 폭의 99.9 %와 컨테이너 글꼴의 두 공간 넓이"가됩니다. 32 %로 줄이면 두 칸이 컨테이너 너비의 4 % 이상으로 합쳐지면 줄 바꿈이 생깁니다 (컨테이너 폭이 작은 경우에만 발생합니다).

실제로 인라인 블록이 서로 솟아 오르도록하려면 그 사이의 공백을 제거하십시오.

Answer 2

요소를 클래스 (thanx Jarrett)로 만들고 해당 클래스에 float:left 스타일을 추가하십시오.

.element 
{ 
    display:inline-block; 
    width:33.3%; 
    margin-left:0; 
    margin-right:0; 
    float:left; 
    border:0px; 
    text-align:center; 
    } 


<div id="container"> 
<div class="element">hi</div> 
<div class="element">every</div> 
<div class="element">one</div> 
</div> 

Answer 3

용기의 너비로 arround를 연주하는 것이 좋습니다. 나를 위해 일하는 팁은 그들에게 줄을 제공하고 있습니다. 아래는 내 기부입니다 :

http://jsfiddle.net/8dWhF/