Вертикально центрируйте два div внутри обертки (с динамическим содержимым и содержимым ниже обертки)

Я пытаюсь центрировать два div с динамическими высотами внутри динамической оболочки... Я играл со всеми трюками, чтобы попытаться заставить этот рабочий кросс-браузер безрезультатно, есть ли у кого-нибудь предложение? См. Рисунок для пояснения! Фиолетовый блок - это еще один блок содержимого. Я хочу сидеть на 20 пикселей ниже динамической оболочки.

Question explanation

  • ПРИМЕЧАНИЕ. Для примечания слева от красной рамки я хотел сказать: "Она должна быть такой же высокой, как у того, что содержит div (зеленый или красный), выше.
  • Я также не знаю, будет ли красный или зеленый ящик выше - просто, чтобы высота зеленого ящика была динамичной, а высота красного была фиксированной.

ОТВЕТЫ

Ответ 1

Используйте display: inline-block + vertical-align: middle на блоках, чтобы они были выровнены так, как вы хотите.

Посмотрите на этот пример: http://jsfiddle.net/kizu/Tky8T/

Еще больше: высота красного div также может быть динамической!

Ответ 2

Если вы сделаете обертку div равной posititon: relative. Затем зеленый div должен быть position: absolute, вы можете сделать его вертикально центрированным. Вот пример: http://jsfiddle.net/56Ase/

Ответ 3

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

Было разработано то, что div больше динамически (т.е. красное или зеленое больше), затем мы игнорируем более крупный div и обрабатываем правильный вертикальный край для меньшего div.

Посмотрите этот пример для лучшего понимания: http://jsfiddle.net/6fN48/

CSS

 #wrapper
{ width: 400px; border: 1px solid blue; padding: 10px; margin: 0 auto; }

#wrapper .red
{ width: 195px; float: left; border: 1px solid red; }

#wrapper .green
{ width: 195px; float: right; border: 1px solid green; }

JQuery

var r = $('#wrapper .red').outerHeight();
var g = $('#wrapper .green').outerHeight();
var w = $('#wrapper').outerHeight();

/* calculate which is bigger and apply the margin to that element */

/* is the red or green div bigger? */
if(r > g){

    /* ok red is bigger, then work out the top margin to apply onto green */
    var x = (w - g) / 2;

    /* apply CSS to the green div */
    $('#wrapper .green').css({ 'margin-top' : x + 'px' });

} else if(r < g){

     /* ok green is bigger, then work out the top margin to apply onto red*/
    var x = (w - r) / 2;

    /* apply CSS to the red div */
    $('#wrapper .red').css({ 'margin-top' : x + 'px' });

}

HTML

<div id="wrapper">
    <div class="red">
        Lorem ....
    </div>
    <div class="green">
        Lorem ipsum dolor ...
    </div>
    <br clear="all" />
</div>

Надеюсь, это поможет, единственный способ - использовать css-позиционирование с известной высотой, что, очевидно, не является динамическим.:)