3カラムレイアウト HTML

html
閲覧10048

116

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>3カラムレイアウト</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container">
&...

///*** 無料ユーザー登録後、正常なすべてのコードが表示されます ***///

hana*uta

2020-6-27

コードの説明

3カラムレイアウトを作る場合も基本的には2カラムレイアウトと考え方は一緒です。
まずは大きいカラムと小さいカラムを左右にフロートさせ、大きなカラムの中にさらに2つの箱を左右にフロートさせていく、という考え方です。

float:left; float:rigth;
---------------------------------- ----------
| | | |
| float:left; float:rigth; | | |
| -------------- | | -------------- | | | |
| | | | | | | |
| | | | | | | |
| | | | | | | |
| | | | | | | |
| -------------- -------------- | | | |
----------------------------------| | --------|

エディタ設定

3カラムレイアウト HTML

3カラムレイアウト HTML