1

DIVを使用してWebサイトにタイルのグリッドを作成する必要があります。一部のタイルは下に伸びて2行をカバーでき、一部のタイルは右に伸びて2列をカバーできます。

これらすべてのタイルを適切に配置する方法を見つけたとすると、これはストレートアップCSSでこれを行うことができますか？サイトは複数のデバイスで正しくレンダリングされる必要があるため、絶対測位の使用は避けたいと思います。

テストとして、次のタイルレイアウトを思いついたのですが、正しくレンダリングする方法が思いつきません。

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

何かご意見は？

4

2 に答える 2

0

次のようなものを使用します。

HTML

<div class="wrap">
    <div class="col2row1"></div>
    <div class="col1row2 right"></div>
    <div class="col1row2"></div>
    <div class="col2row1 right"></div>
</div>​

CSS

div {border: 1px solid #999; float: left;}
.wrap {overflow: hidden; width: 160px; border: 0; float: none; margin: 100px;}
.col1row2 {width: 50px; height: 100px;}
.col2row1 {width: 100px; height: 50px;}
.right {float: right;}​

フィドル: http://jsfiddle.net/NBcEw/

スクリーンショット:

面倒な代わりに、別のプラグインがあります。

jQuery Masonryは、CSS float の裏側である jQuery の動的レイアウト プラグインです。

于 2012-12-30T16:43:22.273 に答える
0

ここに刺し傷があります：

<div style="background-color: #f00; width: 67%; float: left;"> foo</div>
<div style="background-color: #00f; width: 32%; float: right;"> foo<br />bar</div>
<div style="background-color: #0f0; width: 32%; float: left; "> foo <br /> bar</div>
<div style="background-color: #0ff; width: 32%; float: left; "> foo </div>
<div style="background-color: #ff0; width: 67%; float: right;"> foo </div>​

jsFiddleを参照してください。

于 2012-12-30T16:39:57.163 に答える