CSS砌體類型圖像佈局響應

Question

我需要創建一個響應式砌體圖像佈局，但有2個大的部分，這將使它非常棘手？

見附件圖像：

我怎樣才能得到類似的東西，但響應？

Answer 1

您可以嘗試使用列來實現此目的。

HTML

<section id="photos"> 
    <img src="images/image-1.jpg" alt="Some Image"> 
    <img src="images/image-2.jpg" alt="Another Image"> 
    ... 
</section> 

CSS

#photos { 
    /* Prevent vertical gaps */ 
    line-height: 0; 
    -webkit-column-count: 3; 
    -webkit-column-gap: 10px; 
    -moz-column-count: 3; 
    -moz-column-gap:  10px; 
    column-count:   3; 
    column-gap:   10px; 
} 

#photos img { 
    /* Just in case there are inline attributes */ 
    width: 100% !important; 
    height: auto !important; 
} 

而一些媒體查詢CSS

@media (max-width: 800px) { 
    #photos { 
    -moz-column-count: 2; 
    -webkit-column-count: 2; 
    column-count:   2; 
} 
} 
@media (max-width: 400px) { 
    #photos { 
    -moz-column-count: 1; 
    -webkit-column-count: 1; 
    column-count:   1; 
} 
} 

下面是這篇文章的詳細信息Seamless Responsive Photo Grid

Answer 2

考慮使用像Bootstrap這樣的框架。它是grid system使響應，基於列的佈局易於創建。

雖然你必須爲equal heights亂了一下。

這裏的基本想法jsFiddle（嘗試調整視口，看看它的表現在較低的分辨率）：

<div class="container"> 
    <div class="row"> 
     <div class="col-md-4"> 
      <div class="content">a</div> 
     </div> 
     <div class="col-md-4"> 
      <div class="content">a</div> 
     </div> 
     <div class="col-md-4"> 
      <div class="content">a</div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-md-4"> 
      <div class="content">a</div> 
     </div> 
     <div class="col-md-8"> 
      <div class="row"> 
       <div class="col-md-12"> 
        <div class="content">a</div> 
       </div> 
      </div> 
      <div class="row"> 
       <div class="col-md-6"> 
        <div class="content">a</div> 
       </div> 
       <div class="col-md-6"> 
        <div class="content">a</div> 
       </div> 
      </div> 
     </div> 
    </div> 
    <div class="row"></div> 
</div>