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; 
} 

Answer 2

私はabsolute positionningを使用して、いくつかのdivとなるだろう。 %単位を使用して、各タイルに対して幅/高さ/上/左を指定します。

Answer 3

ヒント：左の列用と右のいずれかの1：

• は、「コンテンツのdiv」2つのdivに幅と高さ
• 使用の100％で、「コンテンツのdiv」を使用します。浮いが右から左に、あなたがしなければならない、この三点でdivの

を浮かべ前を来ているDIVことを覚えておいてください

（また、「コンテンツ」にDIV）それらの「％」の次元を与えることを忘れないでください自分自身を試すことができます。ここで

Answer 4

免責

これはプロジェクトのニーズを意味するものではありません。それは他の用途によって痛感されています。

---

今後の参考として、レイアウトクラスのoocssアプローチを検討します。タイルの量が違うページがあるかもしれません。私は自分のプロジェクトに次のものを使用します。

タイルオブジェクト

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

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> 

ドック画面の端に

ドックコンテンツオブジェクト。

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? 

他のもの

私はメトロUI Frameworkのタイルのオブジェクトになります。

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