머리 위와 아래에 모두 정렬 된 머리글

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

바이올린 :이 낮은 [녹색]을 눌러 실패 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

사람이 표/TR/TD 태그에 의지하지 않고 내가이 작업을 수행 할 수있는 방법에 대한 조언을 할 수 있습니까?

감사합니다, 크리스

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>

데모 http://jsfiddle.net/shedali/3sur4ksa/