Как вертикально выравнивать контейнеры 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. Наложение не перекрывается, цель заключается в следующем: image.
5. Высота наружного контейнера должна быть равна наибольшей высоте внутренних контейнеров, если возможно!

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

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

Answer 1

Это, кажется, самое простое решение и работает под 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 2

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

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

Перейти к известному article on a list apart on faux columns и прочитать дальше, чтобы реализовать это, это довольно просто.

Answer 3

Это достаточно легко сделать - 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> 

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

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

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