1

現在、以下に示す複数のタイル システムで構成される Web サイトに取り組んでいます。

タイル レイアウト

それらをコーディングするのにどの方法が最適か疑問に思っています。

私は非常にうまく機能する Masonry を使用しましたが、これは jQuery ベースのソリューションです。 http://jsfiddle.net/xfxYQ/

HTML

<div class="box-container">
    <article class="box span-1x1">1</article>
    <article class="box span-1x1">2</article>
    <article class="box span-2x2">3</article>
    <article class="box span-1x1">4</article>
    <article class="box span-1x1">5</article>
    <article class="box span-2x2">6</article>
    <article class="box span-1x1">7</article>
    <article class="box span-1x2">8</article>
    <article class="box span-1x1">9</article>
</div>

CSS

.box-container {
    width: 240px;
    margin-bottom: 50px;
    background: blue;
}

.box {
    float: left;
    margin-bottom: 10px;
    margin-right: 10px;
    background: red;
}

.span-1x1 {
    width: 50px;
    height: 50px;
}

.span-1x2 {
    width: 50px;
    height: 110px;
}

.span-2x1 {
    width: 110px;
    height: 50px;
}

.span-2x2 {
    width: 110px;
    height: 110px;
}

石積みのjQuery

var $container = $('.box-container');

$container.masonry({
    itemSelector: '.box'
});

プレーンな HTML/CSS ソリューションの賢いアイデアを持っている人はいますか?

4

2 に答える 2

0

このようなものを作成することを目的とした CSS グリッド フレームワークはたくさんあります。

960.gs も CSS ベースのグリッド フレームワークです。Javascript int がないため、そのアーキテクチャを確認したり、それを使用したりすることもできます。

アニメーションや何かが必要な場合は、JavaScript を本当に使用したくない場合 (私も使用したくない場合)、CSS3 でアニメーション化できます。

幸運を。

于 2014-06-07T06:40:07.767 に答える
0

その HTML を列に分割する必要があります。基本的に、これにはその HTML をかなり書き直す必要があります。たとえば、このjsFiddle では:

<div class="box-container cf">
  <div class="column">
    <div class="box span-1x2">0</div>
  </div>
  <div class="column">
    <div class="box span-1x1">1</div>
    <div class="box span-1x1">2</div>
  </div>
  <div class="column">
    <div class="box span-2x2">3</div>
  </div>
</div>
于 2014-06-07T06:41:37.687 に答える