ホームページ > 記事 > ウェブフロントエンド > CSSで3列レイアウトを実装する3つの方法（コード付き）
CSSで3列レイアウトを実装する3つの方法（コード付き）
- 不言オリジナル
- 2018-08-09 11:15:031976ブラウズ
この記事では CSS で 3 列のレイアウトを実装する 3 つの方法を紹介します。必要な方は参考にしていただければ幸いです。
フローティングレイアウト
は3つのdivに分割されており、他の親にはfloatを使用してこれらの3つのdivが含まれています
注: このように3つのdiv、左 --> 右 ---> 中央 順序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
.left {
float: left;
width: 300px;
height: 100px;
background-color: red;
}
.right {
float: right;
width: 300px;
height: 100px;
background-color: blue;
}
.center {
margin: 0px 300px 0px 300px;
background-color: black;
height: 100px;
}
</style>
</head>
<body>
<div class="father">
<div class="left">1</div>
<div class="right">2</div>
<div class="center">3</div>
</div>
</body>
</html> Flex
中央のボックス FLex: 1 を設定します。この場合、適応型のデフォルトの水平配置を実現できます
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.father {
display: flex;
}
.left {
width: 300px;
height: 100px;
background-color: red;
}
.center {
flex:1;
height: 100px;
background-color: black;
}
.right {
width: 300px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div class="father">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>
</html>flex 関連の知識ポイント、一般的に使用される
1 を設定します。表示: flex
2. コンテナ図:
軸: 水平主軸と垂直交差軸
flex-direction: 主軸の方向、行 | 列反転 | nowrap | ラップ リバース;
flex-direction と flex-wrap の略語
justify-content: フレックス スタート スペース | -around;
align-items: クロス軸、フレックスエンドセンターに揃える方法 (実際のコードテスト)
CSS レイアウトとは何ですか?一般的な CSS レイアウト方法 (コード付き)以上がCSSで3列レイアウトを実装する3つの方法（コード付き）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。