從上到下適合父母的元素？

我在設計博客Feed，我有兩類元素.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>

我試圖找出如何從頂適合自己的容器內的底部，同時仍然能夠保持順序移動：

enter image description here

我知道有jQuery的像砌石插件，但由於元素有一個固定的寬度，我希望有一個更簡單的方法來做到這一點。這可能只是與CSS？如果不是，下一步更簡單的方法是什麼？

來源

2014-04-01 lisovaccaro

你是什麼意思「從上到下裝在它們的容器內」？ –

他們總是會在HTML中交替嗎？ – j08691

只需製作兩個欄目分隔符並將相應的框放入每個欄目。簡單得多。 –

你幾乎可以這樣使用引導網格系統實現：http://getbootstrap.com/css/#grid

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

您遇到的唯一問題是擁有不同的div高度。引導解決了使用clearfix的div： -

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

如果您無法訪問您可能能夠通過腳本注入clearfix的div的HTML，雖然箱頂的將不排隊，按您的圖表（嘗試更改我的jsfiddle上的html框架寬度以查看會發生什麼）。

來源

2014-04-02 16:34:08 Ben

我會做這種方式（如果你需要用％全尺寸）：

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>

來源

2014-04-01 15:42:27

我做不到。我需要保持結構，因爲我沒有訪問html，因爲我需要使它響應（如果我「放棄」了，在移動設備上，元素會有錯誤的順序） – lisovaccaro

從上到下適合父母的元素？

回答

相關問題