Как выровнять 3 divs (левый/центральный/правый) внутри другого div?

Я хочу иметь 3 divs, выровненных внутри контейнера div, примерно так:

[[LEFT]       [CENTER]        [RIGHT]]

Контейнерный контейнер имеет ширину 100% (без установленной ширины), а центр div должен оставаться в центре после изменения размера контейнера.

Итак, я установил:

#container{width:100%;}
#left{float:left;width:100px;}
#right{float:right;width:100px;}
#center{margin:0 auto;width:100px;}

Но это будет:

[[LEFT]       [CENTER]              ]
                              [RIGHT]

Любые советы?

ОТВЕТЫ

Ответ 1

С помощью этого CSS поместите свои divs так (сначала плавает):

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

P.S. Вы также можете плавать вправо, затем влево, затем в центр. Важно то, что поплавки проходят до "основного" центра.

P.P.S. Вы часто хотите, чтобы последний внутри #container этот фрагмент: <div style="clear:both;"></div>, который будет растягивать #container по вертикали, чтобы содержать обе боковые поплавки вместо того, чтобы поднимать его высоту только от #center и, возможно, позволять сторонам выступать снизу.

Ответ 2

Если вы не хотите изменять свою структуру HTML, вы также можете сделать, добавив text-align: center; к элементу обертки и display: inline-block; в центрированный элемент.

#container {
    width:100%;
    text-align:center;
}

#left {
    float:left;
    width:100px;
}

#center {
    display: inline-block;
    margin:0 auto;
    width:100px;
}

#right {
    float:right;
    width:100px;
}

Live Demo: http://jsfiddle.net/CH9K8/

Ответ 3

Выравнивание трех разделов по горизонтали с помощью Flexbox

Вот CSS3-метод для выравнивания divs по горизонтали внутри другого div.

#container {
  display: flex;                  /* establish flex container */
  flex-direction: row;            /* default value; can be omitted */
  flex-wrap: nowrap;              /* default value; can be omitted */
  justify-content: space-between; /* switched from default (flex-start, see below) */
  background-color: lightyellow;
}
#container > div {
  width: 100px;
  height: 100px;
  border: 2px dashed red;
}
<div id="container">
  <div></div>
  <div></div>
  <div></div>
</div>

Ответ 4

Свойство Float на самом деле не используется для выравнивания текста.

Это свойство используется для добавления элемента вправо или влево или в центр.

Это означает, что если вы установите float влево, все деления будут добавлены влево.

<code>
     <div>
     <div style="float:left">First</div>
     <div style="float:left">Second</div>
     <div style="float:left">Third</div>
     </div>
</code>

тогда вывод будет

[Первый] [второй] [Третий]

И наоборот, если вы установите свойство Float right для всех, то он будет вставлять все ваши div вправо

[Третий] [Второй] [Первая]

Это означает, что свойство float = > left добавит ваш следующий элемент влево от предыдущего, тот же случай с правом

Также вам нужно рассмотреть ширину родительского элемента

если сумма ширины дочернего элемента превышает ширину родительского элемента, то следующий элемент будет добавлен в следующей строке

<code>
     <div style="width:100%">
     <div style="float:left;width:50%">First</div>
     <div style="float:left;width:50%">Second</div>
     <div style="float:left;width:50%">Third</div>
     </div>
</code>

[Первый] [Второй]

[Третий]

Итак, вам нужно рассмотреть все эти аспекты, чтобы получить идеальный результат

Ответ 5

Мне нравятся мои бары плотно и динамично. Это для CSS 3 и HTML 5

  • Во-первых, ограничение ширины на 100 пикселей ограничено. Не делай этого.

  • Во-вторых, установка ширины контейнера на 100% будет работать нормально, пока не будет говорить о том, что это панель заголовка/нижнего колонтитула для всего приложения, например панель навигации или кредитов/авторских прав. Вместо этого используйте right: 0; для этого сценария.

  • Вы используете id (hash #container, #left и т.д.) вместо классов (.container, .left и т.д.), что прекрасно, если вы не хотите повторять свой стиль в другом месте в вашем коде. Вместо этого я бы предпочел использовать классы.

  • Для HTML нет необходимости менять порядок: левый, центральный и правый. display: inline-block; исправляет это, возвращая ваш код на что-то более чистое и логически в порядке снова.

  • Наконец, вам нужно очистить все поплавки, чтобы он не возился с будущим <div>. Вы делаете это с помощью clear: both;

Подводя итог:

HTML:

<div class="container">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
  <div class="clear"></div>
</div>

CSS

.container {right: 0; text-align: center;}

.container .left, .container .center, .container .right { display: inline-block; }

.container .left { float: left; }
.container .center { margin: 0 auto; }
.container .right { float: right; }
.clear { clear: both; }

Бонусная точка при использовании HAML и SASS;)

HAML:

.container
  .left
  .center
  .right
  .clear

SASS:

.container {
  right: 0;
  text-align: center;

  .left, .center, .right { display: inline-block; }

  .left { float: left; }
  .center { margin: 0 auto; }
  .right { float: right; }
  .clear { clear: both; }
}

Ответ 6

Это можно легко сделать с помощью CSS3 Flexbox, функции, которая будет использоваться в будущем (когда <IE9 полностью мертв) почти каждым браузером.

Проверьте Таблица совместимости браузеров

HTML

<div class="container">
  <div class="left">
    Left
  </div>
  <div class="center">
    Center
  </div>
  <div class="right">
    Right
  </div>
</div>

CSS

.container {
  display: flex;
  flex-flow: row nowrap; /* Align on the same line */
  justify-content: space-between; /* Equal margin between the child elements */
}

Вывод: 

.container {
  display: flex;
  flex-flow: row nowrap; /* Align on the same line */
  justify-content: space-between; /* Equal margin between the child elements */
}

/* For Presentation, not needed */

.container > div {
  background: #5F85DB;
  padding: 5px;
  color: #fff;
  font-weight: bold;
  font-family: Tahoma;
}
<div class="container">
  <div class="left">
    Left
  </div>
  <div class="center">
    Center
  </div>
  <div class="right">
    Right
  </div>
</div>

Ответ 7

Для выравнивания элементов доступно несколько трюков.

01. Использование трюка стола

.container{
  display:table;
 }

.left{
  background:green;
  display:table-cell;
  width:33.33vw;
}

.center{
  background:gold;
  display:table-cell;
  width:33.33vw;
}

.right{
  background:gray;
  display:table-cell;
  width:33.33vw;
}
<div class="container">
  <div class="left">
    Left
  </div>
  <div class="center">
    Center
  </div>
  <div class="right">
    Right
  </div>
</div>

Ответ 8

С twitter bootstrap:

<p class="pull-left">Left aligned text.</p>
<p class="pull-right">Right aligned text.</p>
<p class="text-center">Center aligned text.</p>

Ответ 9

возможный ответ, если вы хотите сохранить порядок html и не использовать flex.

HTML

<div class="a">
  <div class="c">
    the 
  </div>
  <div class="c e">
    jai ho 
  </div>
  <div class="c d">
    watsup
  </div>
</div>

CSS

.a {
  width: 500px;
  margin: 0 auto;
  border: 1px solid red;
  position: relative;
  display: table;
}

.c {
  display: table-cell;
  width:33%;
}

.d {
  text-align: right;
}

.e {
  position: absolute;
  left: 50%;
  display: inline;
  width: auto;
  transform: translateX(-50%);
}

Код Pen Link

Ответ 10

HTML:

<div id="container" class="blog-pager">
   <div id="left">Left</div>
   <div id="right">Right</div>
   <div id="center">Center</div>    
</div>

CSS

 #container{width:98%; }
 #left{float:left;}
 #center{text-align:center;}
 #right{float:right;}

text-align:center; дает идеальное выравнивание по центру.

JSFiddle Demo

Ответ 11

Я сделал еще одну попытку упростить это и достичь этого без необходимости контейнера.

HTML

.box1 {
  background-color: #ff0000;
  width: 200px;
  float: left;
}

.box2 {
  background-color: #00ff00;
  width: 200px;
  float: right;
}

.box3 {
  background-color: #0fffff;
  width: 200px;
  margin: 0 auto;
}

CSS

  .box1 {
  background-color: #ff0000;
  width: 200px;
  float: left;
}

.box2 {
  background-color: #00ff00;
  width: 200px;
  float: right;
}

.box3 {
  background-color: #0fffff;
  width: 200px;
  margin: 0 auto;
}

Вы можете видеть его в режиме JSFiddle

Ответ 12

Использование Bootstrap 3 Я создаю 3 divs равной ширины (в 12 столбцах макета 4 столбца для каждого div). Таким образом, вы можете поддерживать центральную зону в центре, даже если левая/правая секции имеют разную ширину (если они не перекрывают пространство своих колонок).

HTML:

<div id="container">
  <div id="left" class="col col-xs-4 text-left">Left</div>
  <div id="center" class="col col-xs-4 text-center">Center</div>
  <div id="right" class="col col-xs-4 text-right">Right</div>
</div>

CSS

#container {
  border: 1px solid #aaa;
  margin: 10px;
  padding: 10px;
  height: 100px;
}
.col {
  border: 1px solid #07f;
  padding: 0;
}

CodePen

Чтобы создать эту структуру без библиотек, я скопировал некоторые правила из Bootstrap CSS.

HTML:

<div id="container">
  <div id="left" class="col">Left</div>
  <div id="center" class="col">Center</div>
  <div id="right" class="col">Right</div>
</div>

CSS

* {
  box-sizing: border-box;
}
#container {
  border: 1px solid #aaa;
  margin: 10px;
  padding: 10px;
  height: 100px;
}
.col {
  float: left;
  width: 33.33333333%;
  border: 1px solid #07f;
  padding: 0;
}
#left {
  text-align: left;
}
#center {
  text-align: center;
}
#right {
  text-align: right;
}

CopePen

Ответ 13

Вот изменения, которые я должен был внести в принятый ответ, когда я сделал это с изображением в качестве элемента центра:

  • Убедитесь, что изображение заключено в div (#center в этом случае). Если это не так, вам нужно установить display в block и, по-видимому, центрировать относительно пространства между плавающими элементами.

  • Обязательно установите размер как изображения , так и его контейнера:

    #center {
    margin: 0 auto;
}

#center, #center > img {
    width: 100px;
    height: auto;
}

Ответ 14

Вы можете попробовать следующее:

Ваш html-код выглядит следующим образом:

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

и ваш код css следующим образом:

#container{width:100%;}
#left{float:left;width:100px;}
#right{float:right;width:100px;}
#center{margin:0 auto;width:100px;}

поэтому выход должен выглядеть следующим образом:

[[LEFT]       [CENTER]        [RIGHT]]

Ответ 15

.processList
  text-align: center
  li
  .leftProcess
    float: left
  .centerProcess
    float: none
    display: inline-block
  .rightProcess
    float: right

html
ul.processList.clearfix
  li.leftProcess

li.centerProcess
li.rightProcess

Ответ 16

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

overflow: auto;

в ваш класс контейнера.

Ответ 17

Самое простое решение - собрать таблицу с тремя столбцами и центрировать эту таблицу.

HTML:

 <div id="cont">
        <table class="aa">
            <tr>
                <td>
                    <div id="left">
                        <h3 class="hh">Content1</h3>
                        </div>
                    </td>
                <td>
                    <div id="center">
                        <h3 class="hh">Content2</h3>
                        </div>
                 </td>
                <td>
                    <div id="right"><h3 class="hh">Content3</h3>
                        </div>
                </td>
            </tr>
        </table>
    </div>

CSS

#cont 
{
  margin: 0px auto;    
  padding: 10px 10px;
}

#left
{    
  width: 200px;
  height: 160px;
  border: 5px solid #fff;
}

#center
{
  width: 200px;
  height: 160px;
  border: 5px solid #fff;
}

#right
{
  width: 200px;
  height: 160px;
  border: 5px solid #fff;
}

Ответ 18

#warpcontainer  {width:800px; height:auto; border: 1px solid #000; float:left; }
#warpcontainer2 {width:260px; height:auto; border: 1px solid #000; float:left; clear:both; margin-top:10px }