PHP & JavaScript Room :: 設置サンプル

---

<style type="text/css">
    /* 2分割レイアウト */
    .floatL_2 {
        float:left;  /* 左寄せ */
        width:50%;
        margin:0; padding:0;
        background-color:#e0f1f6; color:#96b5d8;
    }
    .floatR_2 {
        float:right;  /* 右寄せ */
        width:50%;
        margin:0; padding:0;
        background-color:#a6c6e8; color:#fff;
    }
    .floatL_2 p,
    .floatR_2 p {
        margin:10px;
    }
</style>

<div style="width:98%;">
    <div class="floatL_2"><p>このボックスは左に浮動します。<p></div>
    <div class="floatR_2"><p>このボックスは右に浮動します。</p></div>
    <br style="clear:both;" /><!-- 回り込み解除 -->
</div>

<hr />

<style type="text/css">
    /* 3分割レイアウト */
    .floatL_3 {
        float:left;  /* 左寄せ */
        width:33%;
        margin:0; padding:0;
        background-color:#e0f1f6; color:#96b5d8;
    }
    .floatC_3 {
        float:left;  /* 左寄せ */
        width:34%;
        margin:0; padding:0;
        background-color:#fbf1b5; color:#96b5d8;
    }
    .floatR_3 {
        float:right;  /* 右寄せ */
        width:33%;
        margin:0; padding:0;
        background-color:#a6c6e8; color:#fff;
    }
    .floatL_3 p,
    .floatC_3 p,
    .floatR_3 p {
        margin:10px;
    }
</style>

<div style="width:98%;">
    <div class="floatL_3"><p>このボックスは左に浮動します。</p></div>
    <div class="floatC_3"><p>このボックスは左に浮動します。</p></div>
    <div class="floatR_3"><p>このボックスは右に浮動します。</p></div>
    <br style="clear:both;" /><!-- 回り込み解除 -->
</div>