Question

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

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

每个部分的html代码和所有部分的容器都是：

{{1}}

Answer 1

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

示例小提琴：http://jsfiddle.net/abhitalks/mbuf9957/3/

示例代码段：

＆＃13;

* { 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; }

＆＃13;

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

＆＃13;

Answer 2

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

<强> CSS / HTML ：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

jsFiddle

Answer 3

仅涉及浮动的解决方案可以重现您的布局。兼容性IE8 +（甚至低于但无人问津）。伪类:nth-child()（compat.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>

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

3 个答案: