CSSで3列レイアウトを実装する3つの方法（コード付き）-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSSで3列レイアウトを実装する3つの方法（コード付き）

不言

Aug 09, 2018 am 11:15 AM

3カラムレイアウト

この記事では 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 サイトの他の関連記事を参照してください。

このウェブサイトの声明