从上到下适合父母的元素？

Question

我为博客提供样式，我有两类元素.big-box和.small-box。在桌面上，第一个宽度为60％，第二个宽度为40％，两者都有不同的高度。

<div>
   <div class="big-box"></div>
   <div class="small-box"></div>
   <div class="big-box"></div>
   <div class="small-box"></div>
   <div class="big-box"></div>
   <div class="small-box"></div>
</div> 

我试图弄清楚如何在容器内从上到下贴合，同时仍然能够在移动设备上保持订单：

我知道有jQuery就像砌体插件，但由于元素有一个固定的宽度我希望有一个更简单的方法来做到这一点。这可能只是用css吗？如果没有，那么下一个更简单的方法是什么？

Answer 1

我会这样做（如果你需要所有尺寸的％）：

http://jsfiddle.net/Thq53/4/

html结构：

<div class="container">
    <div class="left">
        <div class="big"></div>
        <div class="big"></div>
    </div>
    <div class="right">
        <div class="small"></div>
        <div class="small"></div>
        <div class="small"></div>
        <div class="small"></div>
    </div>
</div>

Answer 2

您几乎可以使用引导网格系统实现此目的：http://getbootstrap.com/css/#grid

检查我的jsfiddle：http://jsfiddle.net/ben1/Wb9gL/2/

你唯一的问题是拥有不同的div高度。 Bootstrap通过使用clearfix div解决了这个问题： -

<div class="clearfix visible-md"></div>

如果你无法访问html，你可能可以通过脚本注入clearfix divs，虽然盒子顶部不会按照你的图表排列（尝试改变我的jsfiddle上的html框架宽度，看看会发生什么）。