두 div 사이의 공간을 제거하는 방법은 무엇입니까?

Question

div : display : inline-block으로 레이아웃해야합니다. 의도적으로이 두 div (tileImage, title)가 상위 div (미리보기)의 300px 너비를 공유하도록합니다. 따라서, 너비를 50 %로 설정했습니다. 어떤 이유로 두 번째 div가 다음 줄로 이동합니다.

div "제목"의 너비를 48%으로 변경하면 div "titleImage"옆에 div가 이동합니다. 거기에 그 사이에 공간이 있습니다. 이 공간은 어디에서 왔습니까? 어떻게 제거합니까? http://jsfiddle.net/SFDPe/2/

감사 : 여기

는 JFiddle입니다!

Answer 1

요소를 왼쪽 및 오른쪽으로 플로팅해야합니다. 그런 다음 height: auto; 및 overflow: auto;을 상위 컨테이너로 설정해야합니다. 이렇게하면 .parent 컨테이너가 실제로 오버플로되고 요소가 내부에 떠있을 때 자동으로 커집니다.

JSfiddle here.

.preview { 
    width: 300px; 
    border: 1px solid red; 
    vertical-align: top; 
    height: auto; 
    overflow: auto; 
} 

.title { 
    width: 50%; 
    background-color: olive; 
    float: right; 
} 

.tileImage { 
    width: 50%; 
    background-color: orange; 
    float: left; 
} 

Answer 2

display:inline-block을 사용하는 대신 두 div에 float:left을 사용하십시오. http://jsfiddle.net/SFDPe/3/

Answer 3

이 문서에 살펴 보자 :

Fighting the Space Between Inline Block Elements

은 아마 당신은 대신 float: left;를 사용할 수 있습니까? Like this :

.preview, .preview div { 
    float: left; 
}