국경의 원인이 수레

Question

다음 코드는 두 개의 좋은 colunms을 생산

과 바닥 글 스택 : CSS로

<div class="column one"> 
ONE 
</div> 

<div class="column two"> 
TWO 
</div> 

<div class="footer"> 
Footer 
</div>​ 

: 나는 테두리를 추가 할 때

.column {float: right; width: 30%; margin: 0 10%;} 
.footer {clear: both;} 

는 왜 두 열이 갑자기 상단에 스택을 서로?

.column, .footer { 
    border-style:solid; 
    border-width:1px; 
} 

참조 - 바이올린 : 테두리 폭에 추가하기 때문에 http://jsfiddle.net/usdu7/19/

Answer 1

그것입니다. 따라서 총 너비는 100 % 너비보다 4 픽셀 큽니다. 그래서, 그것은 서로 위에 겹쳐집니다.

상자 크기 조정 속성을 추가하면 문제가 해결됩니다.

http://jsfiddle.net/usdu7/30/