五段組にする

■動作ブラウザ　【 IE:5.0　 NN:6.0　 Safari:1.0】
Internet Explorer Netscape Navigator iCab Safari
3.0x 4.0x 4.5 5.0x 5.5 6.0 2.0x 3.0x 4.0x 4.x 6.0 7.0 2.x 1.x
Windows × × - ○ ○ ○ × × × × ○ ○ - -
Macintosh × × × × - - × × × × ○ ○ × ○
UNIX - - - - - - × × × × ○ ○ - -
Dreamcast - - - - - - - - - - - -

ポイント .block2 { width:100px; height:160px; background-color:yellow; position:relative;left:100px; top:-160px; }
説　　明 五段組にするにはtopプロパティにボックスの縦幅の分だけ上に移動させて配置します。
サンプル <html>
<head>
<title>五段組にする</title>
<style type="text/css"><!--
.main { width:600px; height:160px; }
.block1 { width:100px; height:160px; background-color:orange; position:relative;left:0px; top:0px; }
.block2 { width:100px; height:160px; background-color:yellow; position:relative;left:100px; top:-160px; }
.block3 { width:100px; height:160px; background-color:red; position:relative;left:200px; top:-320px; }
.block4 { width:100px; height:160px; background-color:green; position:relative;left:300px; top:-480px; }
.block5 { width:100px; height:160px; background-color:blue; position:relative;left:400px; top:-640px; }
--></style>
</head>
<body>
五段組にします。<br>
<div class="main">
<div class="block1">
・リンク1<br>
・リンク2<br>
・リンク3<br>
・リンク4<br>
・リンク5<br>
</div>
<div class="block2">
・リンク11<br>
・リンク12<br>
・リンク13<br>
・リンク14<br>
・リンク25<br>
</div>
<div class="block3">
・リンク21<br>
・リンク22<br>
・リンク23<br>
・リンク24<br>
・リンク25<br>
</div>
<div class="block4">
・リンク31<br>
・リンク32<br>
・リンク33<br>
・リンク34<br>
・リンク35<br>
</div>
<div class="block5">
・リンク41<br>
・リンク42<br>
・リンク43<br>
・リンク44<br>
・リンク45<br>
</div>
</div>
</body>
</html>
補足説明 Opera 7でも正しく動作します。

■サンプルを実行する　>>実行
 ■各ブラウザでの動作結果を見る　>>View!