Два встроенных блочных элемента шириной 50% каждый не помещаются бок о бок в один ряд

87

<!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/

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

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

Другой способ решить эту проблему - разместить оба div. См. Http://jsfiddle.net/VptQm/ . Это прекрасно работает.

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

html css Одинокий ученик
источник

Ответы:

139

При использовании 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>

Развернуть фрагмент

Есть несколько способов исправить это:

1. Между этими элементами нет пробелов.

Показать фрагмент кода

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. Использование комментариев HTML

Показать фрагмент кода

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>

Развернуть фрагмент

3. Установите для родителей font-sizeзначение 0, а затем добавив значение inline-blockэлементам

Показать фрагмент кода

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

.parent{
  font-size: 0;  /* parent value */
}

.parent > div{
  display: inline-block;
  width: 50%;
  font-size: 16px; /* some value */
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

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

Развернуть фрагмент

4. Использование отрицательного поля между ними ( не желательно ).

Показать фрагмент кода

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

div{
  display: inline-block;
  width: 50%;
  margin-right: -4px; /* negative margin */
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

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

Развернуть фрагмент

5. Падение закрывающего угла

Показать фрагмент кода

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>

<hr>

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

Развернуть фрагмент

6. Пропуск определенных закрывающих тегов HTML (спасибо @thirtydot за ссылку )

Показать фрагмент кода

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

ul{
  margin: 0; /* removing the default ul margin */
  padding: 0; /* removing the default ul padding */
}

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

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<ul>
  <li class="left">foo
  <li class="right">bar
</ul>

Развернуть фрагмент

Ссылки:

Как @ MarcosPérezGude сказал , то лучший способ заключается в использовании rem, а также добавить значение по умолчанию некоторые font-sizeна htmlметке (например , в HTML5Boilerplate ). Пример:

html{
    font-size: 1em;
}

.ib-parent{             /* ib -> inline-block */
    font-size: 0;
}

.ib-child{
    display: inline-block;
    font-size: 1rem;
}

Обновление : поскольку приближается 2018 год, используйте flexbox или, что еще лучше, макет сетки CSS .

Вуко
источник

3

@hoosierEE, это не чушь. Пространство между элементами в порядке, потому что элементы inline-block будут позиционироваться в текстовой строке. Если вы поставите пробел в строке, будет пробел. Так что поведение правильное, даже если вы думаете, что это проблема (как Вуко называет это неправильно).

Маркос Перес Гуде

2

Я согласен с @ MarcosPérezGude, это правильное поведение. Как вы можете видеть из моего сообщения, есть несколько способов удалить этот пробел (я сам использую HTML-комментарии, чтобы удалить пробел). Но если вы помните , что белое пространство, вы всегда можете использовать flexbox, table/table-row/table-cellили использование float.

Vucko

2

Я отлично использую inline-блоки. Мой нормальный подход parent { font-size:0; } child {font-size: 1rem; }. С ремами сейчас проще всего

Маркос Перес Гуде

немного раздражает, что вкладки по-прежнему обрабатываются как пробелы. Я никогда раньше не видел, чтобы исправление закрывающего тега отбрасывалось, есть ли у него нестабильность или побочные эффекты?

MintWelsh

Также убедитесь, что borderон выключен. Это может добавить пространство, если вы перемещаете div.

evolross

22

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

white-space: nowrap;

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

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

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

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

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

есть другой способ:

font-size: 0;

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

Матрица
источник

7

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

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

Дэн
источник

4

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

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

Михиль ван Остерхаут
источник

4

Либо сделайте их блокированными, а не встроенными блоками. Это будет отображать div без пробелов между ними.

display:block;

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

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

или добавить

margin: -1en;

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

Vittore
источник

2

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

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>

Развернуть фрагмент

Ванит Такур
источник

2

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

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

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

nbixler
источник

1

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

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

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

Виш
источник

0

добавить float: left; к обоим тегам div.

div {
  float: left;
}

Развернуть фрагмент

Татенда
источник