Reponsive Div浮動和高度調整

Question

以下是我的小提琴，我試圖將div浮動到左邊，並將div的WRT排列到高度，例如如果連續3個格子的高度不相等，那麼接下來的三個格子應該根據前面3個格子的高度進行相應的調整，並且在擠壓格子時可以輕鬆地轉到下一行。

相反，我要安排我的div像http://www.kaspervanvliet.nl/index.html

另一個例子http://januarycreative.com/portfolio/

我希望下面可能的圖像可以解釋這一切：

的jsfiddle ：http://jsfiddle.net/StfUk/（增加diplay窗口的寬度）

/* ********************************************************************************************************************* 
* Main container for all 
*/ 
.onepcssgrid-1000, .onepcssgrid-1200 { 
    margin: 0 auto; 
    padding: 0 0 0 1%; /* THAT'S THE NAME ;) */ 
} 

.onepcssgrid-1200 { 
    max-width: 100%; 
} 

.onepcssgrid-1000 { 
    max-width: 1020px; 
} 

.onerow { 
    clear: both; 
    padding: 0 10px; 
} 

/* ********************************************************************************************************************* 
* Common columns definitions 
*/ 
.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 { 
    float: left; 
    margin: 0 3% 0 0; 
} 

.col1.last, .col2.last, .col3.last, .col4.last, .col5.last, .col6.last, .col7.last, .col8.last, .col9.last, .col10.last, .col11.last, .col12 { 
    margin: 0; 
} 

.col1 { width: 5.5%; } 
.col2 { width: 14%; } 
.col3 { width: 22.5%; } 
.col4 { width: 31%; } 
.col5 { width: 39.5%; } 
.col6 { width: 48%; } 
.col7 { width: 56.5%; } 
.col8 { width: 65%; } 
.col9 { width: 73.5%; } 
.col10 { width: 82%; } 
.col11 { width: 90.5%; } 
.col12 { width: 99%; margin: 0; } 

.col1 img, .col2 img, .col3 img, .col4 img, .col5 img, .col6 img, .col7 img, .col8 img, .col9 img, .col10 img, .col11 img, .col12 img { 
    width: 100%; 
    height: auto; 
    display: block; 
} 

/* ********************************************************************************************************************* 
* Disable padding left/right 10px if I'm 1024 or gibber - correct percentage math 
*/ 
@media all and (min-width: 1024px) { 
    .onepcssgrid-1000 { 
     max-width: 1000px; 
    } 

    .onepcssgrid-1000 .onerow { 
     padding: 0; 
    } 
} 

/* ********************************************************************************************************************* 
* Small devices 
*/ 
@media all and (max-width: 768px) { 
    .onerow { 
    } 

    .col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11 { 
     float: none; 
     width: 99%; 
    } 
} 

Answer 1

以及我看着示例及其安靜容易。有三個格作容器和圖像（在你的情況的div）嵌套在這些div就必須有上下頁邊距定義：

CSS：

.parent{ 
padding:10px; 
float:left; 
width:300px; 
} 

.item{ 
margin:20px 0px; 
display:block; 
width:300px; 
} 

HTML：

<div style="text-align:center"> 
    <div style="display:inline-block"> 
     <div class="parent"> 
      <div class="item"></div> 
      <div class="item"></div> 
      <div class="item"></div> 
     </div> 
     <div class="parent"> 
      <div class="item"></div> 
      <div class="item"></div> 
      <div class="item"></div> 
     </div> 
     <div class="parent"> 
      <div class="item"></div> 
      <div class="item"></div> 
      <div class="item"></div> 
     </div> 
    </div> 
</div> 

divs與類項目是你想要的那些div。