メインの部分で段組
このトップページのようにメインの部分で段組を作ります。
ここが左側の段組
ここが右側の段組
ここが左側の段組
ここが右側の段組
上のように2つのパターンの段組を作る事が出来ます。HTMLは以下のようになっています。
<div class="clearfix">
<div class="main_left_box1">
<p>ここが左側の段組</p>
</div>
<div class="main_right_box1">
<p>ここが右側の段組</p>
</div>
</div>
<div class="clearfix">
<div class="main_left_box2">
<p>ここが左側の段組</p>
</div>
<div class="main_right_box2">
<p>ここが右側の段組</p>
</div>
</div>
左右の組み合わせを変えれば以下のようにもできます。
ここが左側の段組
ここが右側の段組
ここが左側の段組
ここが右側の段組
上のHTMLは
<div class="clearfix">
<div class="main_left_box1">
<p>ここが左側の段組</p>
</div>
<div class="main_right_box2">
<p>ここが右側の段組</p>
</div>
</div>
<div class="clearfix">
<div class="main_left_box2">
<p>ここが左側の段組</p>
</div>
<div class="main_right_box1">
<p>ここが右側の段組</p>
</div>
</div>