2つの異なる親の列の同じ高さをブロックします

Question

私は2つの列が並んでいるレイアウトを作成しようとしています。 1は、背景画像上にテキストを含み、もう1つは、下にテキストブロックを含む、上に広い画像を含む。だから、

は、私が持っている問題は、私はそれで左の列のテキストを揃えない方法：ここではモックアップからの迅速なスケッチがあります（任意の画像にリンクするのが最善の方法で確認されませんでした）右側に？明らかに彼らは2つの別々の部門に分かれているので、お互いに多くの関係を持っているわけではありません。だからそれはトリッキーなビットです。ここで

がCodePenです： https://codepen.io/moy/pen/wPEdjo

だから私は、彼らが同じ高さを持っているので、divを設定するためにflexboxを使用しました、私はそれが最善の方法だかどうかわからないんだけど？そして現在、テキストは垂直方向に中央に配置されています。私はテキストを下に整列させることを考えましたが、テキストはスケッチのように互いにインラインになるように中央揃えにする必要がありますので、どちらもそうしません。

私が考えることができるのは、スペーサーイメージを左イメージと同じアスペクト比で追加することだけです。しかし、もう一度、テキストはおそらく私がそれを必要としている方法に集中しないだろうか？スペーサーの代わりに:before要素を高さ/幅のパーセンテージで同じ効果に使用することができます。

だから、基本的に私は立ち往生している！何か案は？このためのflexboxは最高の/唯一の解決策ですか？

Answer 1

私のアプローチは、フレックスボックスを利用した純粋なCSSで、次のようなものになります。イメージを表示する方法（例：<img>タグまたはbackground）のように、正確な実装は2つの要素に依存しますが、これは主なアイデアを共有するためのものです。

/* basic reset */ 
 
* { 
 
    box-sizing: border-box; 
 
} 
 
body { 
 
    position: relative; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
/* layout */ 
 
#background { 
 
    position: absolute; 
 
    width: 50%; 
 
    height: 100%; 
 
    background-color: LightGrey; 
 
    z-index: -1; 
 
} 
 
#content { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.row { 
 
    flex: 1; 
 
    display: flex; 
 
} 
 

 
.col { 
 
    flex: 0 0 50%; 
 
    padding: 50px; 
 
} 
 

 
#wide-image { 
 
    overflow: hidden; 
 
    padding: 0; 
 
    background-color: GhostWhite; 
 
}

<div id="background"></div> 
 

 
<div id="content"> 
 
    <div class="row"> 
 
     <div class="col"></div> 
 
     <div id="wide-image" class="col"> 
 
      <img src="http://via.placeholder.com/720x318" /> 
 
     </div> 
 
    </div> 
 

 
    <div class="row"> 
 
     <div class="col"> 
 
      <h1>Some text here</h1> 
 
      <p>Lorem ipsum dolor sit amet</p> 
 
     </div> 
 
     <div class="col"> 
 
      <p>Lorem ipsum dolor sit amet</p> 
 
      <p>Lorem ipsum dolor sit amet</p> 
 
      <p>Lorem ipsum dolor sit amet</p> 
 
      <p>Lorem ipsum dolor sit amet</p> 
 
     </div> 
 
    </div> 
 
</div>