Развернуть по вертикали div

У меня есть контейнер div, внутри есть 3 элемента div, каждый со своим контентом. Контейнер горизонтально центрирован. Я хотел бы, чтобы три элемента div соответствовали высоте контейнера.Развернуть по вертикали div

<body> 
    <div id="Container"> 
     <div id="A"><P>Some multiROW<br>content</P></div> 
     <div id="B">single row content</div> 
     <div id="C"><P>Some multiROW<br>content</P></div> 
    </div> 
</body>

JSFiddle

В примере, средний циан элемент должен иметь такую же высоту, как и другие дивы. Содержимое должно быть также вертикально центрировано. Как я могу его получить?

источник

2014-11-26 mauretto

Пожалуйста, включите ваш код в вопрос. Кроме того, не используйте сотрудничество при подключении к JSFiddle; среди прочего, это просто путает вопросы больше. (Никто не может быть уверен, как ваш код выглядел в первую очередь.) – George

Извините за сотрудничество, это новая особенность? как отключить его ??? – mauretto

Не нажимайте кнопку «Сотрудничество». Нажмите «Сохранить» и поделитесь URL-адресом в адресной строке. – George

попробовать это

http://jsfiddle.net/KHFn8/5161/

#Container { 
    width: 50%; 
    margin: auto; 
    display:table; 
} 

#A { 
    width: 15%; 

    text-align: right; 
    background-color: red; 
    display:table-cell; 
} 

#B { 
    width: 70%; 

    text-align: center; 
    background-color: aqua; 
    height: inherit; 
    display:table-cell; 
    vertical-align: middle; 
} 

#C { 
    width: 15%; 

    text-align: left; 
    background-color: yellow; 
    display:table-cell; 
}

источник

2014-11-26 09:54:04

Это работает! Существует ли нет-табличное решение? – mauretto

для вертикального выравнивания есть много способов, но если вы хотите сделать высоту такой же, как и у другого div, то это будет хорошо –

Один из этих «способов»? – mauretto

Попробуйте это,

#Container { 
    width: 50%; 
    margin: auto; 
    overflow: hidden; 
    position: relative; 
} 

#A { 
    width: 15%; 
    float: left; 
    text-align: right; 
    background-color: red; 
    margin-bottom: -99999px; 
    padding-bottom: 99999px; 
} 

#B { 
    width: 70%; 
    float: left; 
    text-align: center; 
    background-color: aqua; 
    margin-bottom: -99999px; 
    padding-bottom: 99999px; 

} 

#C { 
    width: 15%; 
    float: left; 
    text-align: left; 
    background-color: yellow; 
    margin-bottom: -99999px; 
    padding-bottom: 99999px; 
}

Ссылка: http://css-tricks.com/fluid-width-equal-height-columns/

источник

2014-11-26 09:49:20

почему это v-margin? Мне не нужна полная страница div! – mauretto

, что маржа будет соответствовать родительскому div –

Вы просите за это ...

height:auto;

Это сделает контейнер не установить его высоту автоматически, независимо от того, сколько DIV находятся там в ней ...

:::::::::::::: EDIT ::::: :::::::

<style type="text/css"> 
#container{width:1000px;height:auto;background-color:#CCCCCC;} 
#A{width:900px;height:300px;background-color:#00FF00;} 
#B{width:900px;height:100px;background-color:#99FFFF;} 
#C{width:900px;height:400px;background-color:#CC99FF;} 
</style>

источник

2014-11-26 09:56:03

Я пробовал без успеха, вы можете показать его в моем примере? – mauretto

Я использовал цвет фона только чтобы показать разницу ... –

Но я не знаю высот, контент динамически предоставляется. – mauretto

Как о следующем: http://jsfiddle.net/7ecm7qzh/

(с использованием таблицы-ячейки в собственность дисплея, со средним вертикального выравнивания, и 100% высоты)

<div id="Container"> 
    <div id="A"><P>Some multiROW<br>content</P></div> 
    <div id="B">single row content</div> 
    <div id="C"><P>Some multiROW<br>content</P></div> 
</div> 

#Container { 
width: 50%; 
margin: auto; 
display:table; 
} 

#Container div{ 
    vertical-align:middle; 
    display:table-cell; 
    height:100%; 
} 

#A { 
    width: 15%; 
    text-align: right; 
    background-color: red; 
} 

#B { 
    width: 70%; 
    text-align: center; 
    background-color: aqua; 
} 

#C { 
    width: 15%; 
    text-align: left; 
    background-color: yellow; 
}

источник

2014-11-26 10:00:04 Marcob14

Развернуть по вертикали div

ответ

Смежные вопросы