Как избавиться от пространства между двумя div?

Question

У меня есть divs в виде дисплея: inline-block. Преднамеренно, я хочу, чтобы эти два div (tileImage, title) делили ширину родительского div (превью) на 300 пикселей. Таким образом, я установил их ширину до 50%. По какой-то причине второй div перемещается на следующую строку.

Изменение ширины div «title» to 48% будет перемещать div рядом с div «titleImage». Там вы заметили промежуток между ними. Откуда это место? Как я могу избавиться от него?

Вот JFiddle: http://jsfiddle.net/SFDPe/2/

Спасибо!

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 использование, float:left для обоих разделов. http://jsfiddle.net/SFDPe/3/

Answer 3

Посмотрите на эту статью:

Fighting the Space Between Inline Block Elements

Может быть, вы можете использовать float: left; вместо этого? Как this:

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