Заголовок с верхним и нижним выравниваемым контентом

Question

Я потратил несколько часов, пытаясь разобраться в этом, может быть, кто-то может помочь.

Я пытаюсь создать заголовок с логотипом переменной высоты с левой стороны и двумя блоками с правой стороны, чтобы верхний блок был выровнен по верхнему краю с логотипом, а нижний блок был выровнен по нижнему краю с логотипом. Я хочу избежать использования TABLE по очевидным причинам. Высота логотипа можно считать длиннее, чем два правых блока.

Моя первая попытка была с помощью display:table и т.д .. как можно видеть здесь:

<header> 
    <div class="c1">Logo Here<br />aaaaaaaaa<br />aaaaaaaaa<br /> 
aaaaaaaaa<br />aaaaaaaaa<br />aaaaaaaaa</div> 
    <div class="c2"> 
     <div class="r1">Upper Block (top align)</div> 
     <div class="r2">Lower Block (bottom align)</div> 
    </div> 
</header> 

CSS:

header, div { border: solid 1px red; } 
div.c1 { background-color: #FDF; } 
div.c2 { background-color: #FFD; } 
div.r1 { background-color: #DFF; } 
div.r2 { background-color: #DFD; } 
header { 
    display:table; 
    table-layout:fixed; 
    width: 100%; 
} 
header > div { 
    display:table-cell; 
} 
.c1 { width: 70%; rowspan:2; } 
.c2 { width: 30%; } 

Fiddle: http://jsfiddle.net/BloodBaz/ytubnaoc Это не может нажать нижнюю [зеленый] блока (и содержимого) в нижней части [желтого] контейнера.

Я рассмотрел использование «», но для него очень мало поддержки браузера (IE10 + по состоянию на 2015-01-27).

Я также имел игру с помощью «flex layout» (два вложенных макетов - одна горизонтальная, одна вертикальная), но не мог заставить это работать либо:

CSS:

header, div { border:solid 1px blue; } 
div.c1 { background-color: #FCC; } 
div.c2 { background-color: #CFC; } 
div.r1 { background-color: #CCF; } 
div.r2 { background-color: #FFC; } 

header 
{ 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    flex-flow: row nowrap; 
} 
header > div { width: 50%; } 
/*header > div > div { height: 50%; } doesn't work */ 
.c2 
{ 
    display: flex; 
    flex-flow: column nowrap; 
    /*align-items: stretch; doesn't work */ 
} 
.r2 
{ 
    text-align:right; 
    /* vertical-align:bottom; doesn't work */ 
    /* align-self:flex-end; doesn't work */ 
} 

JSFiddle: http://jsfiddle.net/BloodBaz/qmz4qcs1

может кто-нибудь посоветовать, как я могу это сделать, не прибегая к TABLE/TR/TD теги?

Спасибо, Chris

Answer 1

Вы можете использовать позицию: абсолютная донизу выровнять зеленый DIV

div { 
 
    border: solid 1px red; 
 
} 
 
div.h1 { 
 
    background-color: #FDF; 
 
} 
 
div.h2 { 
 
    background-color: #FFD; 
 
    position:relative; 
 
} 
 
div.h3 { 
 
    background-color: #DFF; 
 
    text-align:right; 
 
} 
 
div.h4 { 
 
    background-color: #DFD; 
 
    text-align:right; 
 
    position:absolute; 
 
    bottom:0; 
 
    width:100%; 
 
} 
 
div#header { 
 
    display:table; 
 
    width: 100%; 
 
} 
 
div#header > div { 
 
    display:table-cell; 
 
} 
 
div.h1 { 
 
    width: 70%; 
 
} 
 
div.h2 { 
 
    width: 30%; 
 
}

<div id="header"> 
 
    <div class="h1">aaaaaaaaa 
 
     <br />aaaaaaaaa 
 
     <br />aaaaaaaaa 
 
     <br />aaaaaaaaa 
 
     <br />aaaaaaaaa 
 
     <br />aaaaaaaaa</div> 
 
    <div class="h2"> 
 
     <div class="h3">bbbbbbbbb</div> 
 
     <div class="h4">ccccccccc</div> 
 
    </div> 
 
</div>

Demo http://jsfiddle.net/shedali/3sur4ksa/