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

Question

Я хочу, чтобы 3 div были выровнены внутри контейнера div, что-то вроде этого:

[[LEFT]       [CENTER]        [RIGHT]]

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

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

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

Но это становится:

[[LEFT]       [CENTER]              ]
                              [RIGHT]

Какие-нибудь советы?

Answer 1

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

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

Answer 2

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

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

Answer 3

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

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

2. Убедитесь, что установлен размери изображение и его контейнер:

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

Answer 4

.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

Answer 5

Вы можете попробовать это:

Ваш 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]]

Answer 6

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

overflow: auto; 

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

Answer 7

#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 }

Answer 8

Самым простым решением является создание таблицы с 3 столбцами и центрирование этой таблицы.

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;
}