html - 具有不同宽度css3的动态网格系统？

Question

我需要像这样执行动态网格系统:

每个部分都是一篇文章，其中包含图像、标题和指向该文章的链接/按钮。问题是每个部分都是动态加载的，我只有该部分的 html，所以我需要从 CSS 动态地将每个部分放在正确的位置。我知道的是有 5 个部分。

每个section的html代码和所有section的容器是这样的:

<section class="scroll"> 
    <!-- ARTICLES -->
        <!-- ARTICLE -->
        <div class="article-content">
            <img class="article-image" src="${item.imgPath}" />
            <div class="article-texts">
                <h1 class="article-title">${item.title}</h1>
                <a class="article-button" href="${item.link}.html" role="button">Read Article ></a>
            </div>
        </div>
        <div class="clear"></div>
        <!-- END ARTICLE -->
    <!-- END ARTICLES -->
</section>

Answer 1

如果您可以控制 section 的尺寸，则可以使用固定宽度的容器并 float section 在其中.清除第四部分的 float。

示例 fiddle :http://jsfiddle.net/abhitalks/mbuf9957/3/

示例片段:

* { box-sizing: border-box; padding: 0; margin:0; }
div { width: 380px; overflow: hidden; }
section { border: 1px solid #666; float: left; }
section:nth-child(1) { width: 240px; height: 240px; }
section:nth-child(2) { width: 120px; height: 120px; }
section:nth-child(3) { width: 120px; height: 120px; }
section:nth-child(4) { width: 120px; height: 120px; clear: left; }
section:nth-child(5) { width: 240px; height: 120px; }

<div>
    <section>1</section>
    <section>2</section>
    <section>3</section>
    <section>4</section>
    <section>5</section>
</div>