인라인 블록 상자 모델 대 레이아웃 요소의 블록 상자 모델?

Question

는 이제이 코드 조각을 보자 :

HTML

<div class="mid"> 
    test inline-block 
</div> 
<div class="mid"> 
    test inline-block 
</div> 
<div class="floated"> 
    test block floated 
</div> 
<div class="floated"> 
    test block floated 
</div> 

또한 테스트 목적으로 바이올린 볼 수 있습니다

.mid { 


display: inline-block; 
    margin: 0; 
    padding: 1em; 
    box-sizing: border-box; 
    width: 47.5%; 
    background: red; 
} 
.mid + .mid { 
    margin-left: 4%; 
} 
.floated { 
    float: left; 
    display: block; 
    background: green; 
    margin: 0; 
    padding: 1em; 
    box-sizing: border-box; 
    width: 47.5%; 
} 
.floated + .floated { 
    margin-left: 5%; 
} 

CSS : http://jsfiddle.net/LdDSJ/

을 지금 내 질문 : 정상적인 크기, 인라인 블록과 플로팅 블록이 나란히 있습니다. 괜찮습니다. 그러나 그들은 너비가 동일하지 않습니다.

창 크기를 조정하십시오. 인라인 블록 요소가 끊어지고 하나가 다른 블록 아래로 이동합니다. 그건 그렇고, 나는 그 요소에 휴식 마저 남았을 것이기 때문에 더 낮은 마진을 남겨 두어야 만했다.

주변에 약간의 공백이 있으므로 제 질문은 레이아웃 요소를 표시하는 것이 가능한지 여부입니다. display : block + float 속성 대신 inline-block? 제공되는 모든 솔루션 (How to remove the space between inline-block elements?)은 해킹 된 것처럼 보입니다 (font-size : 0, 댓글 사용, ...)?

Answer 1

CSS 속성 display:inline-block;에는 요소 사이에 공백이 포함됩니다. 이 공간의 크기는 브라우저에 따라 다릅니다. 그래서 계산 : 그것은 그 공백을 포함하지 않기 때문에

47.5% + 47.5% + 5% (margin-left) != 100%

이 올바르지 않습니다.

그 공백을 제거하는 방법에는 여러 가지가 있습니다, 당신은 찾을 수있는 몇 가지 here

---

편집 :은 매우 간단합니다 (이 모든 경우에 작동하지 않을 수 있습니다 만들하지만 당신을 도울 수 내가 display:inline-block; (otpion 1) 또는 플로트 속성 (옵션 2), 내 대답이 될 것와 display:block가 요에 따라 사용해야 질문 인 경우)

을 선택 통해 목표.

두 가지 해결책 모두 해결할 수 있습니다. 1

케이스 당신은 용기의 전체 폭을 확대하기 위해 요소가 필요합니다. 사용 옵션 1을 사용하면 작업 할 필요가 없습니다.

사례 2

당신은 아이에 따라 높이의 확장 부모 요소가 필요합니다. 사용 display:inline-block;

사례 3

당신은 모두 (부모의 높이 = 어린이와 요소의 전체 폭에 따라 확장 100 %)

그런 다음 두 옵션 모두 주변에 작업을해야합니다 필요합니다. 옵션 1의 경우 옵션 2의 경우 here을 참조하십시오. 부모 컨테이너를 clearfix 또는 float해야합니다.