左右のレイアウトについては、片側の高さが可変で、反対側の高さがCSSレイアウトと同じです。

Baiduのほとんどの人は、この問題を解決するために負のパディングと負のマージン値を設定すると言います。実際、この方法は本に記載されており、比較的簡単な方法です。Baiduではできない別の方法を提供します。より単純な方法である最初の方法は、絶対垂直ドキュメントフロー適応プロパティを使用します。アブソリュートの水平および垂直のドキュメントフローの適応を理解したい場合は、アブソリュートに関する私のCSSの記事を参照してください。問題を解決するアイデアを見てみましょう、下の図を参照してください：

写真の左側が写真、右側が固定テキストですが、なぜ固定テキストが不確かなのですか？携帯電話の画面解像度の問題により、固定テキストの高さも可変になる場合があります。次に、左側の画像の高さを右側のテキストの高さと同じにします。

絶対メソッドコード：

//父容器
.fatherCtn{
  position:relative;
}
.leftCtn{
  position: absolute;
  width: 48%;
  top: 0;
  bottom: 0;
  img{
    height: 100%;
    width: 100%;
  }
}
.rightCtn{
  display: block;
  margin-left: auto;
  width: 48%;
}

flex、stretch属性を使用します（デフォルト値。要素はコンテナに合うように引き伸ばされます。指定された交差軸サイズの属性値が「auto」の場合、その値により、アイテムのマージンボックスのサイズが行のサイズにできるだけ近くなります。ただし、同時に、「min / max-width / height」プロパティの制限に従います。）

//父容器
.fatherCtn{
  display: flex;
  align-items: stretch;
}
.leftCtn{
  width: 48%;
  img{
    height: 100%;
    width: 100%;
  }
}
.rightCtn{
  width: 48%;
}