具有不同宽度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

如果您可以控制sections 的尺寸，您可以使用固定宽度的容器和float 里面的sections。清除第四部分的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 属性设置为相对于其他框的空间量，您希望它们在容器中占据并设置@ 987654327@ 到 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>