3カラムレイアウト HTML

  • html
  • 閲覧905
13
<!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">
&...

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

					

3カラムレイアウト HTML

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


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