ホームページ > 記事 > ウェブフロントエンド > BFC ルールに基づく CSS 2 列レイアウト (コード例)
BFC ルールに基づく CSS 2 列レイアウト (コード例)
- 不言転載
- 2019-04-03 11:35:382805ブラウズ
この記事の内容は、BFCルールに基づいたCSSの2カラムレイアウト（コード例）に関するもので、一定の参考価値がありますので、困っている方は参考にしていただければ幸いです。
一般的なアダプティブ 2 列レイアウトを CSS で実装する方法はたくさんあります。
ここで話していることは、オーバーフローが表示に設定されていないときに新しい BFC を形成することでこれを実現することです。 BFC とは何かについては、まず検索してみてください。基本的には説明されています。もっと自由な時間ができたら、BFC と例についてお話します。以上です。コードを入力します:
<!-- 利用BFC的overflow hidden实现两列布局-->
<!DOCTYPE html>
<html>
<head>
<title>利用BFC规则实现两栏布局</title>
<meta charset="utf8">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.contain {
width: 100%;
height: 100%;
background: grey;
color: #fff;
}
.contain .left {
float: left;
/*margin-right: 20px;*/
width: 200px;
height: 100%;
word-wrap: break-word; /* 用于纯数字和英文时能够超出时自动换行*/
background: blue
}
.contain .right {
height: 100%;
overflow: hidden; /* 让right成为一个BFC*/
word-wrap: break-word; /* 用于纯数字和英文时能够超出时自动换行*/
background: darkblue;
}
</style>
</head>
<body>
<!-- CSS2.1规范中已经明确提出，设置overflow属性（非visible）能触发块级格式化上下文(Block Formatting Conext, BFC)。 -->
<div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia quis error ea veniam animi quibusdam, nobis repudiandae consectetur sed? Minus architecto cumque perspiciatis saepe rerum non dolorum voluptates similique, consequuntur.</div>
<div>right这里的overflow:hidden不是本来的意思（超出容器内容截取掉不显示），而是利用了BFC规则（overflow不为visible时会创建出一个BFC）</div>
</div>
</body>
</html>
コード内の最も長い行 (行 37) に注目してください。ここのテキストは英語ではなく、ラテン語です。もちろん、それは私の手ではあまりタイプされていません。テスト中に何かを入力したいが、何を入力すればよいか分からず、見た目も醜い場合は、怠けている可能性があります。 「lorem」と入力してタブキーを押すと、最初の文が固定されているのでそれ以外はランダムに生成されます。前提として、エディターに emmit プラグインが装備されていることが前提となります。Hbuilder と vscode は組み込まれており、直接利用できます。テキストを送信するには、プラグインがインストールされている必要があります。メモ帳は間違いなく機能しません。私はこれらを個人的にテストしました。ちょっとした楽しみですね！他のコメントはほぼ書かれており、コードは元々非常にシンプルですが、CSS はこれらを実装するにはより実践的な経験が必要です。今回のエッセイはここまでです、忙しい時は質はあまり良くないかもしれませんが、今は何かを書くことにこだわり始めています。
また、左側は固定、右側は適応です。右側は固定、左側は適応です。簡単に扱えると思います。どれも些細なことです。思いついたら思い出します。この 2 列の適応は、両方の列が適応的であることを意味するものではありません。
【関連する推奨事項: CSS ビデオ チュートリアル ]
以上がBFC ルールに基づく CSS 2 列レイアウト (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。