Два элемента 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;
}