Как выровнять контейнеры div с CSS?

Question

Я ищу общее и полное решение этой общей проблемы! У меня есть HTML-код, подобный этому:

<div id="CONTAINER">
    <div id="CONTAINER_LEFT"></div>
    <div id="CONTAINER_RIGHT"></div>
    <div id="CONTAINER_CENTER"></div>
</div>

Я хочу написать CSS, который позволил бы мне выровнять внутренние элементы div по вертикали, чтобы их верхние края были в линии . Другие соображения:

1. Левый и правый контейнеры имеют фиксированную ширину.
2. Центральный контейнер должен заполнить оставшуюся ширину между левой и Правильные контейнеры.
3. Высота каждого внутреннего контейнера зависит от его содержимого. и так варьируется между контейнерами.
4. Никакого перекрытия не предполагается, цель примерно такая изображение.
5. Высота внешнего контейнера должна быть равна наибольшей высоте внутренних контейнеров, если это возможно !!

Цвета только для отображения идеи!

Я использовал "float: left;" и "плавать: правильно;" свойства для правого и левого контейнеров, но если в центральном контейнере слишком много содержимого, область этого контейнера заполняет пространство под плавающими элементами! Также мне нужен нижний колонтитул ниже корневого контейнера с шириной 100%; Любое решение должно учитывать это!

Answer 1

Это достаточно просто сделать - http://jsfiddle.net/spacebeers/dBvXY/2/

Здесь используется метод CSS-столбцов одинаковой высоты, описанный здесь - http://www.ejeliot.com/blog/61

Вы задаете для основных столбцов массивный нижний отступ и равное отрицательное нижнее поле. Ваш контейнер должен иметь переполнение скрытым. Скорректируйте числа соответственно, но процитируйте Brain Fantana «60% времени, это работает каждый раз».

.container {
    width: 100%;
    overflow: hidden;    
}

.left{
    float: left;
    padding: 0px 10px 0px 0px;
    width: 90px;
    background: red;
}

.middle{
    top: 10px;
    margin-left: 100px;
    margin-right: 100px;
    background: green;
    margin-bottom: -2000px;
    padding-bottom: 2000px;
}

.right{
    float: right;
    background: blue;
    padding: 0px 10px 0px 10px;
    width: 90px;
}​

<div class="container">
    <div class="left">
        Some content for the left column.
    </div>
    <div class="right">
        Some content for the right column.
    </div>
    <div class="middle">
        Some content for the middle column.
    </div>
</div>

1010 *

Answer 2

привет, пожалуйста, попробуйте этот код

HTML

<div id="left"></div>
<div id="right"></div>
<div id="center">here you van place your text</div>

CSS

#left + #right + #center {
    MARGIN-LEFT: 203px;
}
#left + #content {
    MARGIN-LEFT: 203px;
}
#right + #center {
    MARGIN-RIGHT: 203px
}

#left
{
    float:left;
    width:200px;
    background:#00CC99;
    height:300px;
}
#right
{
    float: right;
    width:200px;
    background:#33FF66;
    height:400px;
}
#center
{
    height:550px;
    padding:10px;
    background:#006666;
    color:#fff;
}

Answer 3

Это, кажется, самое простое решение и работает под IE7-9, FF, Chrome, Safari и Opera:

.container {
   overflow: hidden;
   background: grey;
}

.left {
   float: left;
   width: 200px;
   background: red;
}

.middle {
   margin-left: 200px;
   margin-right: 200px;
   background: green;
}

.right {
   float: right;
   width: 200px;
   background: blue;
}

Answer 4

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

css

.wraper{
    display:table;
    margin:0 auto;
    overflow:hidden;
}
.left{
    display:table-cell;
    background:red;
}

.center{
    display:table-cell;
    margin:0 auto;
    width:200px;
    background:green;
    height:50px;
}


.right{
    display:table-cell;
    background:yellow;
}

​

HTML

<div class="wraper">


    <div class="left">left</div>
    <div class="center">Center</div>
    <div class="right">right</div>

</div>
    ​

Демонстрация здесь http://jsfiddle.net/rohitazad/WeQN2/

Answer 5

Если вы намерены (в центре) контейнера заполнить доступное пространство под ним, вы, вероятно, ищете метод искусственных столбцов .

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

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