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

Question

我需要执行这样的动态网格系统：

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

每个部分的html代码以及所有部分的容器是这样的：

<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 s的尺寸，则可以使用固定宽度的容器并将section s float在其中。 清除第四部分的float 。

小提琴示例 ： 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> 

Answer 2

由于您已将其标记为CSS3，因此我认为可以选择Flexbox 。 您可以在父级上设置display:flex ，然后为每个框的flex-basis设置百分比宽度，并将flex-grow属性设置为相对于其他框的空间量，您希望它们占据容器并设置flex-shrink到0因为您不需要缩小它们。

CSS / HTML ：

 .grid-system { /* Uncomment the next line to see the container */ /* border:1px solid black; */ } .grid-system .box-width-2 { border:1px solid black; -webkit-flex:2 0 65%; flex: 2 0 65%; } .grid-system .box-width-1 { border:1px solid black; -webkit-flex:1 0 32%; flex: 1 0 32%; } .grid-system .box-height-2 { -webkit-flex-grow:2; flex-grow:2; } .grid-system .box-height-1 { -webkit-flex-grow:1; flex-grow:1; } .grid-system .flex-row { display:-webkit-flex; display:flex; -webkit-flex-flow:row nowrap; flex-flow:row nowrap; -webkit-justify-content:flext-start; justify-content:flex-start; } .grid-system .flex-column { display:-webkit-flex; display:flex; -webkit-flex-flow:column nowrap; flex-flow:column nowrap; width:32%; } .grid-system .flex-row > div { margin:0.5% } .grid-system .box-width-1.box-height-1 { margin-bottom:0.5%; -webkit-flex-grow:1; flex-grow:1; } .grid-system .box-width-1.box-height-1.end { margin-bottom:0px; } 

 <div class="grid-system"> <div class="flex-row"> <div class="box-width-2 box-height-2">1</div> <div class="flex-column"> <div class="box-width-1 box-height-1">2</div> <div class="box-width-1 box-height-1 end">3</div> </div> </div> <div class="flex-row"> <div class="box-width-1">4</div> <div class="box-width-2">5</div> </div> </div> 

jsFiddle

Answer 3

仅涉及浮点的解决方案可以复制您的布局。 兼容性IE8 +（甚至更低，但无人问津）。 伪类:nth-child() （兼容IE9 +）在此处用于提供演示的任意宽度和高度，您将在实际条件下拥有自己的布局。

 * { box-sizing: border-box; } div { width: 360px; } section { border: 1px solid #666; } .left { float: left; } .right { float: right; } .clear { clear: both; } section:nth-child(1) { width: 240px; height: 240px; } section:nth-child(2) { width: 120px; height: 100px; } section:nth-child(3) { width: 120px; height: 80px; } section:nth-child(4) { width: 200px; height: 120px; } section:nth-child(5) { width: 160px; height: 100px; } 

 <div> <section class="left">1</section> <section class="right">2</section> <section class="right">3</section> <section class="left clear">4</section> <section class="right">5</section> </div>