-2

ページ全体を埋める次のような流動的なレイアウトを作成したいと思います (幅:100%;高さ:100%)。

+----+----+----+----+
|    |    |    |    |
+----+----+----|    |
|    |    |    |    |
+----+----+----|    |
|    |    |    |    |
+----+----+----+----+

各セルの内側には、div 幅の丸みを帯びた境界線が必要で、セル間にセルの間隔を設定したいと考えています。各セルは (overflow:hidden) でサイズを固定する必要があります。

これを行うための最良の方法に関するアイデアはありますか?

（アップデート）

テーブルを作成しようとしましたが、その中の td と div の高さが固定パーセンテージでオーバーフローが非表示になっている場合でも、行やセルの高さが不均衡に大きくなるのを制御できません。

また、9 div を左にフロートさせ、1 div を右にフロートさせてみました。マージンまたはパディングが設定されていない場合、うまく機能します。パディングとマージンが（パーセンテージで）設定され、幅と高さが（パーセンテージで）補正されるとすぐに。何も一致していないようです。

この2つのうち、どちらをさらに開発し続ける必要がありますか?

4

1 に答える 1

0 
<style>
    html, body, table { width:100%; height:100%; }
    td { width:25%; height:33%; }
    div.round { width:100%; height:100%; background:blue; border-radius:5px; overflow:hidden; }
</style>


<table>
    <tr>
        <td><div class="round"></div></td>
        <td><div class="round"></div></td>
        <td><div class="round"></div></td>
        <td rowspan="3"><div class="round"></div></td>
    </tr>
    <tr>
        <td><div class="round"></div></td>
        <td><div class="round"></div></td>
        <td><div class="round"></div></td>
    </tr>
    <tr>
        <td><div class="round"></div></td>
        <td><div class="round"></div></td>
        <td><div class="round"></div></td>
    </tr>
</table>
于 2012-04-24T03:18:34.720 に答える