CSS Тип масонства Макет изображения отзывчивый

Question

Мне нужно создать отзывчивую макетную макетную макет, но есть две большие секции, которые сделают ее очень сложной?

см.прикрепленного изображения:

Как я могу получить что-то подобное, но в ответе?

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>