html - CSS と HTML を使用したタイル レイアウト

Question

テーブルに依存せずに、ユーザーの画面サイズに自動的に適応する、このようなタイル レイアウトを実現するための適切なソリューションは何でしょうか。つまり、解像度の幅や高さに関係なく、画面全体がタイルで満たされる必要があります。

アイデアをいただければ幸いです。

〜ロバート

Answer 1

これが実際の例です: jsfiddle

HTML:

<div class="container">
<div class="first">first</div><div class="third">third</div>
<div class="second">second</div><div class="fourth">fourth</div><div class="last">last</div>
</div>​

CSS:

html, body, .container
{
    height: 100%; 
    min-height: 100%;
}

.first {
    float: left;
    width: 20%;
    height: 30%;
    background-color: red;
}

.second{
    float: left;
    width: 20%;
    height: 70%;
    background-color: green;
}


.third{
    float: right;
    width: 80%;
    height: 80%;
    background-color: blue;
}

.fourth {
    float: right;
    width: 40%;
    height: 20%;
    background-color: #DDDDDD;
}

.last{
    float: right;
    width: 40%;
    height: 20%;
    background-color: yellow;
}

</p>

Answer 2

私は絶対配置divを使用していくつかを使用します。そして、単位を使用して各タイルの幅/高さ/上/左を指定します。%

Answer 3

ヒント：

• 幅と高さが 100% の「コンテンツ div」を使用する
• 「コンテンツ div」に 2 つの div を使用します。1 つは左側の列用で、もう 1 つは右側の列用です。それらの「％」ディメンションを（「コンテンツ」divにも）与えることを忘れないでください
• フロートされた右の div は、左のフロートされた div の前に来なければならないことに注意してください

この3点で、あなたは自分自身を試すことができるはずです.

Answer 4

免責事項

これは、プロジェクトのニーズを意味するものではありません。それは他の用途ですでに答えられています。

---

今後の参考のために、レイアウト クラスへの oocss アプローチを検討します。タイルの数が異なるページなどがあるかもしれません。私は自分のプロジェクトで以下を使用しています。

Tiles オブジェクト

タイル レイアウトの作成に使用されます。

CSS

.tiles
{
    display: block;
}

.tiles__item
{
    display: block;

    height: auto;

    float:left;
}

.tiles--2
{
    margin-left: -4%;
}

.tiles--3
{
   margin-left: -2%;
}

.tiles--4
{
    margin-left: -2%;
}

.tiles--2 .tiles__item
{
    margin-left: 4%;

    width: 46%;
}

.tiles--3 .tiles__item
{
    margin-left: 2%;

    width: 31.3%;
}

.tiles--4 .tiles__item
{
    margin-left: 2%;

    width: 23%;
}

html

<div class="tiles tiles--2">

    <div class="tiles__item">

    </div>

    <div class="tiles__item">

    </div>

</div>

Dock オブジェクト

コンテンツを画面の端にドッキングします。

CSS

.dock 
{
    position: absolute;

    height: auto; 

    width: auto;
}

.dock--t
{
    width: 100%;

    top: 0;
}

.dock--b
{
    width: 100%;

    bottom: 0;
}

.dock--l
{
    height: 100%;

    left: 0;
}

.dock--r
{
    height: 100%;

    right: 0;
}

html

<div class="dock dock--t">

    The content will be docked to the top of the screen.

</div?

その他のもの

Metro UI フレームワークの Tiles オブジェクトを見てみましょう。彼らは高さを可能にします

http://metroui.org.ua/

プロポーションを使用する優れたレイアウト システムを探している場合:

https://github.com/stubbornella/oocss/wiki/Grids