html - 动态网格 CSS

Question

如何实现看起来像这样的动态网格？ :

我不知道如何正确构建 css 来实现这一点。目前，这是我的网格的样子:

这是我一直试图解决这个问题的 fiddle :

http://jsfiddle.net/qqeo9ety/2/

---

这是我当前的 CSS:

blue {
    width: 40px;
    height: 40px;
    margin: 5px;
    background-color: blue;
    float:left;
    display:inline;
}

.red {
    width: 90px;
    height: 90px;
    margin: 5px;
    float:left;
    background-color: red;
}

非常感谢您的任何想法!!

Answer 1

这样的事情怎么样？

<div id="container">

<div id="c1">
<div class="blue"></div>
<div class="blue"></div>
<div class="blue"></div>
<div class="blue"></div>
<div class="blue"></div>
<div class="blue"></div>
</div>

<div id="c2">    
<div class="red"></div>
<div class="blue"></div>
<div class="blue"></div>
</div>

<div id="c3">
<div class="blue"></div>
<div class="blue"></div>
<div class="blue"></div>
</div>

</div>

使用以下额外的 CSS:

#c1, #c2 {
    width: 100px;
    float: left;
}

主要思想是首先将其设置为三列。