CSS3.0のレイアウト関連 - float属性
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> float属性 </title> <style type="text/css"> div { border:1px solid black; width: 150px; height: 80px; padding: 5px; } </style> </head> <body> <div style="float:left;"> float:left; 左に浮く1 </div> <div style="float:left;"> float:left; 左に浮く2 </div> <div style="float:right;"> float:right; 右に浮く3 </div> <div style="float:right;"> float:right; 右に浮く4 </div> </body> </html>
・複数カラムレイアウト
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> 複数カラムのレイアウト </title> <style type="text/css"> body{ margin:0px; } div#container { width: 460px; margin:auto; } div>div { border: 1px solid #aaf; box-sizing: border-box; -moz-box-sizing: border-box; border-radius: 12px 12px 0px 0px; background-color: #ffc; padding:5px; } </style> </head> <body> <div id="container"> <!-- float:left;左に浮く --> <div style="float:left;width:120px"> <h2>タイトル1</h2> <ul> <li>要素1-1</li> <li>要素1-2</li> <li>要素1-3</li> </ul> </div> <!-- float:left;左に浮く --> <div style="float:left;width:200px;"> <h2>タイトル2</h2> テスト文字列テスト文字列<br> テスト文字列テスト文字列<br> テスト文字列テスト文字列<br> テスト文字列テスト文字列<br> テスト文字列テスト文字列<br> テスト文字列テスト文字列<br> テスト文字列テスト文字列<br> </div> <!-- float:left;左に浮く --> <div style="float:left;width:140px"> <h2>タイトル3</h2> <ul> <li>要素3-1</li> <li>要素3-2</li> <li>要素3-3</li> <li>要素3-4</li> </ul> </div> </div> </body> </html>