Два элемента inline-block, каждый размером 50%, не подходят друг за другом в одной строке

<!DOCTYPE html>
<html>
<head>
<title>Width issue</title>
<style type="text/css">
body {
    margin: 0;
}
#left {
    width: 50%;
    background: lightblue;
    display: inline-block;
}
#right {
    width: 50%;
    background: orange;
    display: inline-block;
}
</style>
</head>
<body>
    <div id="left">Left</div>
    <div id="right">Right</div>
</body>
</html>

JSFiddle: http://jsfiddle.net/5EcPK/

Приведенный выше код пытается разместить #left div и #right div рядом друг с другом в одной строке. Но, как вы можете видеть в приведенном выше JSFiddle URL, это не так.

Я могу решить проблему, уменьшая ширину одного из div до 49%. См. http://jsfiddle.net/mUKSC/. Но это не идеальное решение, потому что между двумя divs возникает небольшой промежуток.

Еще один способ, которым я могу решить проблему, - это плавать оба div. См. http://jsfiddle.net/VptQm/. Это прекрасно работает.

Но мой первоначальный вопрос остается. Почему, когда оба div сохраняются как элементы встроенного блока, они не подходят друг к другу?

Ответ 1

При использовании элементов inline-block всегда будет существовать проблема whitespace между этими элементами (это пространство около ~ 4 пикселей шириной).

Итак, ваши два divs, которые имеют ширину 50%, плюс whitespace (~ 4px) более 100% по ширине, и поэтому он ломается. Пример вашей проблемы:

body{
  margin: 0; /* removing the default body margin */
}

div{
  display: inline-block;
  width: 50%;
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<div class="left">foo</div>
<div class="right">bar</div>

Ответ 2

хороший ответ:

white-space: nowrap;

в родительском узле и:

white-space: normal;
vertical-align: top;

в div (или другом) в 50%

пример: http://jsfiddle.net/YpTMh/19/

РЕДАКТИРОВАТЬ:

есть еще один способ с:

font-size: 0;

для родительского узла и переопределить его в дочернем узле

Ответ 3

Это потому, что пробел между вашими двумя divs интерпретируется как пробел. Если вы поместите теги <div> в строку, как показано ниже, проблема исправлена :

<div id="left"></div><div id="right"></div>

Ответ 4

Либо сделайте их блок вместо встроенного блока. Это приведет к тому, что divs игнорируют пробелы между ними.

display:block;

или удалить пробел между тегами

<div id='left'></div><div id='right'></div>

или добавить

margin: -1en;

в один из div, чтобы уменьшить пространство, сделанное единым пространством.

Ответ 5

Потому что между элементами есть пробел. Если вы удалите все пробелы, они будут соответствовать.

<div id="left">Left</div><div id="right">Right</div>

Ответ 6

Это можно сделать, добавив отображение css: inline к div, содержащему встроенные элементы.

При удалении пробела с использованием поля с отрицательным значением необходимо добавить его к этому конкретному элементу. Поскольку добавление его в класс повлияет на места, где этот класс был использован.

Так что было бы безопаснее использовать display: inline;

Ответ 7

Пример Flexbox - это будет использоваться для родительского класса, содержащего два элемента рядом друг с другом.

.parentclass {
  display: flex;
  justify-content: center;
  align-items: center; 
}

Взято из Вертикального центрирования div внутри другого div

Ответ 8

Пожалуйста, проверьте ниже код:

body {
    margin: 0;
}
#left {
    width: 50%;
    background: lightblue;
    display: inline-block;
    float:left;
}
#right {
    width: 50%;
    background: orange;
    display: inline-block;
    float:left;
}

<div id="left">Left</div>
<div id="right">Right</div>

Ответ 9

добавить поплавок: слева; на оба тега div.

div {
  float: left;
}