Горизонтально выровнять div без поплавка

Я хочу знать, существует ли элегантный способ горизонтального выравнивания 3 divs без использования свойства float css.

HTML:

<div id="parent">  
  <div id="first">Left</div>  
  <div id="second">Middle</div>  
  <div id="third">Right</div>
</div>

Я задаю этот вопрос, потому что родительский div не имеет свойства float и добавление float к детям вызывает проблемы при изменении страницы.

Ответы

Ответ 1

Вы можете использовать display:inline-block или display:table-cell с внутренним контентом.

#parent{ display:flex; justify-content: space-between; }

JSFiddle

  • Таблица:
#parent{ display:table; width:100%; }
#parent div{ display:table-cell; }
#first{ text-align:left; }
#second{ text-align:center; }
#third{ text-align:right; }

JSFiddle

  • Макет встроенного блока:
#parent{ width:100%; white-space:nowrap; }
#parent div{ display:inline-block; width:33.3%;}
#first{ text-align:left; }
#second{ text-align:center; }
#third{ text-align:right; }

JSFiddle

Ответ 2

Добавление в notulysses answer. Если поддержка старого браузера не является проблемой, вы можете использовать css3 Flexible_boxes.

Применяя display:flex, дочерние div будут выравниваться по горизонтали (по умолчанию)

#parent{
 display:flex;
 justify-content:space-around;
}

подробнее о flexbox @CSSTricks

Это позволит избежать проблемы с пробелом с элементами inline-block

JSfiddle

Ответ 3

#parent { 
    display: table; 
}

#first, #second, #third { 
    display: table-cell; 
}

Ответ 4

Вместо поиска обходного пути для плавания вы также можете использовать следующее исправление для своих "проблем с изменением размера" (по крайней мере, по моему мнению, это вызвано):

После использования float вы всегда должны очищать свои поплавки. Вы можете сделать это, добавив дополнительный <div> с классом.

<div id="parent">  
  <div id="first">Left</div>  
  <div id="second">Middle</div>  
  <div id="third">Right</div>
  <div class="clear"></div>
</div>

В CSS:

.clear{
  clear: both;
}

Ответ 6

С помощью CSS ниже вы можете достичь своей цели:

#parent{
 width:140px;
    height:30px;
    border:1px solid #CCC; 
}
#first{
    width:19px;
    height : inherit;
    display:inline;
    border : 1px solid red;
}
#second{
    width:19px;
    height : inherit;
    display:inline;
    border : 1px solid green;
}
#third{
    width:19px;
    height : inherit;
    display:inline;
    border : 1px solid blue;
}

Fiddle