인라인 블록을 표시하지 않는 이유는 무엇입니까?

Question

죄송합니다. 아주 기본적인 질문입니다.

내가 폭 여기 evenly-

 .box1 
     { 
     width:50%; 
     height:200px; 
     } 

     .box2 
     { 
     width:50%; 
     height:200px; 
     } 

를 포함하는이 두 개의 상자가 나는 용기 div 100 %와 포함 관계의 폭을 가질 때 알고 싶은 이들 박스 -

.container 
{ 
    border:1px solid green; 
    display:inline-block; 
    width:100%; 
    } 

의 컨테이너 사업부입니다 divs은 너비의 50 %로 균등하게 나눕니다. 그런 다음 인라인 정렬 후 왜 인라인으로 나오지 않습니까? 그러나 너비를 50 % 미만으로 줄이면 폭이 줄어 듭니다. 내가 플로트로 정렬하면 그

.container 
{ 
    border:1px solid green; 
    display:inline-block; 
    width:100%; 
    } 
.box1 
{ 
    float:right; 
    width:50%; 
     height:200px; 
    background:red; 
} 
.box2 
{ 
    float:right; 
    background:red; 

    width:50%; 
    height:200px; 

} 

나는 이유를 알고 싶어 inline- 표시 속성 있지만

왜 폭이 균등하게 나누어 져 인라인 여부를 표시되지?

Answer 1

그들은 인라인 블록하지만, 일반적으로 50 %를 사용하는 경우 당신은 및 여백/패딩 라운딩 픽셀에 포함되지 않습니다. 따라서 50 %는 50 % + 10px가되므로 다음 div가 같은 줄에 맞지 않게되고 줄을 끊고 가로 줄이 아닌 첫 번째 div 아래로 떨어 뜨립니다. Chrome의 검사기 또는 Firebug의 Firebug를 사용하여 요소를 검사하면 전체 너비를 차지하지 않고 절반 이상을 차지하는 것을 알 수 있습니다.

Answer 2

테두리는 요소 크기의 일부로 계산됩니다 (너비는 100 %에 추가되지 않고 포함됩니다). 그러면 인라인 요소가 다음 줄로 이동합니다.

박스 모델은 모두가 함께 부분이 패딩과 마진을 포함하여 최종 크기를 얻을 수있어 추가합니다 http://www.w3.org/TR/CSS2/box.html

정상적인 잡았다는 것을 당신은 당신이 실제로 마지막에 두 개의 픽셀을 추가하는 1 픽셀의 경계를 지정하는 경우 계산 된 크기, 왼쪽에 하나, 오른쪽에 하나.

Answer 3

먼저 패딩을 설정합니다. 0; 및 여백 : 0; 어떤 브라우저 할당 패딩 (사용자 에이전트 스타일 시트 - 크롬에서 inspect 요소를 사용하거나 Mozilla 등에서 방화 광구를 사용하여 볼 수 있음)을 가져오고, 플로트 할 경우 왼쪽으로 떠서 나중에 플로트를 지 웁니다.

.container{ 
    border: 1px solid green; 
    width:100%; 
} 

.box1{ 
    margin: 0; 
    padding: 0; 
    float:left; 
    width:50%; 
    height:200px; 
    background:red; 
} 

.box2{ 
    margin: 0; 
    padding: 0; 
    float:left; 
    background:red; 
    width:50%; 
    height:200px; 
} 

트릭을 할해야 : 그래서 당신이 뭔가를 가지고있다.