너비가 100 % 인 인라인 블록이 한 줄에 맞지 않습니다.

Question

컨테이너의 왼쪽에 div가 있고 같은 줄에 컨테이너의 오른쪽에 div가 있습니다. 필자는 인라인 블록을 사용하여이를 시도하고 오른쪽 컨테이너에 텍스트 정렬을 시도합니다. 부모 컨테이너 글꼴 크기에도 불구하고 어떤 이유

<div class="container"> 
    <div class="left"> 
    I'm on the left 
    </div> 

    <div class="right-container"> 
    <div class="right"> 
     I'm on the right 
    </div> 
    </div> 
</div> 



.container { 
    font-size: 0; 
    width: 100%; 
} 

.container > div { 
    font-size: 12px; 
    border: solid 1px black; 
    display: inline-block; 
    width: 50% 
} 

.right-container { 
    text-align: right; 
} 

http://codepen.io/anon/pen/WbbBzE

: 0, 아이들은 다른 라인에 드롭 모두 50 %입니다. 너비를 49 %로 설정하면 효과가있는 것처럼 보이지만 왜 50 %가 좋지 않을지 이해하지 못합니다. 그것을 할 수있는 더 좋은 방법이 있습니까?

Answer 1

너비는 요소 테두리의 영향을받습니다. divs에 box-sizing:border-box;을 추가하여 나란히 앉힐 수 있습니다.

.container { 
 
    font-size: 0; 
 
    width: 100%; 
 
} 
 
.container > div { 
 
    font-size: 12px; 
 
    border: solid 1px black; 
 
    display: inline-block; 
 
    width: 50%; 
 
    box-sizing: border-box; 
 
} 
 
.right-container { 
 
    text-align: right; 
 
}

<div class="container"> 
 
    <div class="left">I'm on the left</div> 
 
    <div class="right-container"> 
 
    <div class="right">I'm on the right</div> 
 
    </div> 
 
</div>