CSS_html/css_WEB-ITnose を使用して、左側が固定幅、右側が適応型の 2 列レイアウトを実装する方法

私が最近 Baidu IFE トレーニング キャンプで見た質問:

2 つの異なる方法を使用して 2 列レイアウトを実装します。このレイアウトでは、左側の部分の幅が固定され、右側の部分の幅が時間に応じて自動的に変化します。ブラウザ幅の変更に適応する

私は次の 3 つの実装アイデアを個人的にまとめました:

1. 絶対配置によって実現

CodePen の xal821792703 (@honoka) による Pen の絶対 2 列を参照してください。 :

絶対位置を設定するには、「位置決めされた」親要素

div-a を設定し、ブラウザの左上隅に位置を調整する必要があります

div-b margin-left 属性値は、 div-a (div-a はすでにドキュメントフローの外に絶対配置されているため、幅を div-a に設定しないと相互に重なってしまいます)

div-c 絶対配置して真下に位置を調整します

適応させる必要がある div の幅を 100% に設定します

2 . float によって実装されます

CodePen の xal821792703 (@honoka) の Pen float-two-column を参照してください。

div-a を left float に設定します

div-b は上記と同様に必須です margin-left 属性の値を div-a の幅に設定します 理由は上記と同じです。 flow

div-c フローティングの影響を避けるために、フローティングをクリアするのが最善です

3. BFC ルールによって実装されています

CodePen の xal821792703 (@honoka) の Pen bfc-two-column を参照してください。ここで BFC の紹介に多くのスペースを費やす必要はありません。次の 2 つのブログ投稿を参照してください:

BFC と Margin Collapse の詳細な説明

CSS での BFC の詳細な説明

要するに、BFC は問題を解決するのに役立ちます。以下に示すように、レイアウトの左側の要素がドキュメント フローから離れた後、右側の要素の左外マージンが、それを含むブロック コンテナの左外枠に接触するという問題があります。

ここで、div- b は BFC 要素に設定されます。

上記は私がまとめた3つの2カラムレイアウト方法です 交換歓迎です。

また、Baidu IFE フロントエンド トレーニング キャンプに興味がある場合は、私のレポへようこそ (笑)