ホームページ > 記事 > ウェブフロントエンド > CSSで3列レイアウトを実装するにはどうすればよいですか? 3 列レイアウトを実装する 3 つの方法 (コード例)
CSSで3列レイアウトを実装するにはどうすればよいですか? 3 列レイアウトを実装する 3 つの方法 (コード例)
- 青灯夜游転載
- 2018-10-24 16:29:198502ブラウズ
今回の記事の内容はCSSで3カラムレイアウトを実装する方法を紹介するものです。 3 列レイアウトを実装する 3 つの方法 (コード例)。困っている友人は参考にしていただければ幸いです。
3 列レイアウトとは、両側の 2 列の固定幅を指し、中央の幅は適応されます。
一般的に使用される 3 つの方法:
ポジショニング
フローティング
弾性ボックスのレイアウト
配置方法
最も直観的で理解しやすい方法は、左右の列の絶対配置を選択し、ページの両側でそれらを修正します。側面では、中央の本文がマージンを使用して位置を決定することを選択します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>定位方法创建三列布局</title>
<style>
*{
margin: 0;
padding: 0;
}
.left{
width: 200px;
height: 500px;
background-color: yellow;
position: absolute; /* 绝对定位，使位置固定 */
left: 0;
top: 0;
}
.center{
height: 600px;
background-color: purple;
margin: 0 300px 0 200px; /* 通过外边距确定宽度 */
}
.right{
width: 300px;
height: 500px;
background-color: red;
position: absolute; /* 绝对定位，使位置固定 */
right: 0;
top: 0;
}
</style>
</head>
<body>
<div>Left</div>
<div>Center</div>
<div>Right</div>
</body>
</html>
Result
フローティング方式
左右の部分をフローティングにして、ドキュメントの流れから離れた後の中央の部分にマージンを使用して適応させます
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮动法创建三列布局</title>
<style>
*{
margin: 0;
padding: 0;
}
.left{
width: 200px;
height: 500px;
background-color: yellow;
float: left;
}
.center{
height: 600px;
background-color: purple;
margin: 0 300px 0 200px;
min-width: 100px; /* 最小宽度，防止浏览器缩小后中间部分被隐藏 */
}
.right{
width: 300px;
height: 500px;
background-color: red;
float: right;
}
</style>
</head>
<body>
<div>Left</div>
<div>Right</div>
<div>Center</div> <!-- 左右部分脱离文档流，中间部分平铺 -->
</body>
</html>
フレキシブルボックスレイアウト
コンテナを使用して3つの列をラップし、コンテナの表示をフレックスに設定し、左右の部分の幅を固定に設定し、中央のフレックスを1に設定され、左側と右側の値は固定されるため、中央のadaptive
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>弹性盒子创建三列布局</title>
<style>
*{
margin: 0;
padding: 0;
}
.container{
display: flex;
}
.left{
width: 200px;
height: 500px;
background-color: yellow;
}
.center{
height: 600px;
flex: 1;
background-color: purple;
}
.right{
width: 300px;
height: 500px;
background-color: red;
}
</style>
</head>
<body>
<div>
<div>Left</div>
<div>Center</div>
<div>Right</div>
</div>
</body>
</html>以上がCSSで3列レイアウトを実装するにはどうすればよいですか? 3 列レイアウトを実装する 3 つの方法 (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事はcnblogs.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。