Бок о бок divs без пробела?

Я имею в виду эту Fiddle, которую я нашел на SO, которая использует display: inline-block;, и я применил ее к своей собственной работе, но я не могу понять, как заставить два divs сидеть бок о бок, а не с 3-4px разрыв?Бок о бок divs без пробела?

http://jsfiddle.net/zygnz/1/

Я пробовал:

HTML

<div class="container"> 
     <div class="left"> 
      LEFT 
     </div> 
     <div class="right"> 
      RIGHT 
     </div> 
</div>

CSS

div.left { 
    background:blue; 
    height:200px; 
    width:300px; 
} 

div.right{ 
    background:green; 
    height:300px; 
    width:100px; 
} 

.container{ 
    background:black; 
    height:400px; 
    width:450px; 
} 

.container div { 
    display: inline-block; 
}

Но ничего не получил.

источник

2013-10-01 SaturnsEye

'дисплей: рядный block' добавить некоторый разрыв между применяемыми элементами. чтобы удалить этот пробел, не выделяйте пространство между элементами в HTML-коде, например: '

' или используйте 'float: left' вместо' display: inline-block'. если вы хотите по-прежнему идти с 'display: inline-block', тогда есть исправление для применения маржи в отрицательных значениях в элементе' em'. Я думаю, что это '-0.36em'. –

Я хотел бы использовать float:left, но и попробовать настройки полей на div.left и div.right до 0, как:

margin:0 auto;

Так, с скрипкой:

div.left { 
    background:blue; 
    height:200px; 
    width:300px; 
    margin:0 auto; 
    float:left; 
}

источник

2013-10-01 11:48:19

Если вы установили отображение: встроенный блок; затем добавьте margin-right: -4px;, чтобы удалить разрыв.

see this demo

источник

2013-10-01 11:42:04

Блестящий, что работает, но это самый приятный способ сделать это? – SaturnsEye

альтернативно вы можете использовать float: left; –

вы можете удалить новую строку между элементами в HTML – avrahamcool

На самом деле вы не должны ничего менять в CSS, чтобы избежать разрыва,

это пробельная проблема в HTML,

изменить HTML-код для этого

<div class="container"> 
     <div class="left">LEFT 
     </div><div class="right">RIGHT 
     </div> 
</div>

jsFiddle here

ИЛИ

вы можете редактировать CSS

Вы можете использовать float:left; вместо display:inline-block;, чтобы свести на нет пробельных проблемы.

источник

2013-10-01 11:47:23

Использование 2 диапазона (теперь divs), сделайте встроенный блок и не оставляйте между ними пробелы или новые строки. Использовать интервалы не divs, потому что некоторые старые элементы не могут создавать элементы встроенного блока из блоков по умолчанию, таких как div.

Как это:

<span style="display: inline-block">one</span><span style="display: inline-block">two</span>

Не нравится:

<span style="display: inline-block">one</span> <span style="display: inline-block">two</span>

источник

2013-10-01 11:54:42 Aleksandrenko

Вместо использования display:inline-block вы можете float в div's, просто изменить css к

.container div { 
float:left; 
}

Приведенный выше код должен получить требуемый результат.Он будет выравнивать div рядом друг с другом без пробела.

см ссылками ниже, чтобы увидеть, что вызвало белое пространство или около float и display:inline block

Reference 1

Reference 2

источник

2013-10-01 11:58:39 Pbk1303

Бок о бок divs без пробела?

ответ

Смежные вопросы