2014-10-12 2 views
0

Использование начальной загрузки, можно предотвратить пробелы, как это: (без всех высотах то же самое, что было бы просто заполнение пробелов ..)предотвращения пустых пробелов с начальной загрузки

enter image description here

<div class="container"> 

    <div class="row"> 
     <div class="col-xs-6 col-lg-6"> 
      aaaaaaa<br /> 
      aaaaaaa<br /> 
      aaaaaaa<br /> 
      aaaaaaa<br /> 
     </div> 
     <div class="col-xs-6 col-lg-6"> 
      bbbbbbbb<br /> 
      bbbbbbbb<br /> 
      bbbbbbbb<br /> 
      bbbbbbbb<br /> 
      bbbbbbbb<br /> 
      bbbbbbbb<br /> 
      bbbbbbbb<br /> 
      bbbbbbbb<br /> 
      bbbbbbbb<br /> 
      bbbbbbbb<br /> 
     </div> 
     <div class="col-xs-6 col-lg-6"> 
      cccccccc<br /> 
     </div> 
     <div class="col-xs-6 col-lg-6"> 
      dddddddd<br /> 
      dddddddd<br /> 
      dddddddd<br /> 
      dddddddd<br /> 
      dddddddd<br /> 
     </div> 
     <div class="col-xs-6 col-lg-6"> 
      eeeeeeee<br /> 
     </div> 
    </div> 
</div> 

здесь jsfiddle работать:

http://jsfiddle.net/DTcHh/1438/

+0

ваш вопрос непонятный. где вы хотите устранить пробелы? –

+0

Нет, вам нужен плагин, чтобы это произошло. Что-то вроде http://masonry.desandro.com/ –

+0

@RahulSambari, как под aaaaaaaaa, есть большой белый прямоугольник. Я бы предпочел, если ccccccc движется туда. – clankill3r

ответ

0

насчет упаковки цветной div в два столбца и складывать их между собой.

Demo

<div class="container"> 
    <div class="row"> 
     <div class="col-xs-6 col-lg-6" style="padding: 0;"> 
      <div style="background: red; padding: 0 15px;"> 
       aaaaaaa<br /> 
       aaaaaaa<br /> 
       aaaaaaa<br /> 
       aaaaaaa<br /> 
      </div> 
      <div style="background: blue; padding: 0 15px;"> 
       cccccccc<br /> 
      </div> 
      <div style="background: yellow; padding: 0 15px;"> 
       eeeeeeee<br /> 
      </div> 
     </div> 
     <div class="col-xs-6 col-lg-6" style="padding: 0;"> 
      <div style="background: green; padding: 0 15px;"> 
       bbbbbbbb<br /> 
       bbbbbbbb<br /> 
       bbbbbbbb<br /> 
       bbbbbbbb<br /> 
       bbbbbbbb<br /> 
       bbbbbbbb<br /> 
       bbbbbbbb<br /> 
       bbbbbbbb<br /> 
       bbbbbbbb<br /> 
       bbbbbbbb<br /> 
      </div> 
      <div style="background: purple; padding: 0 15px;"> 
       dddddddd<br /> 
       dddddddd<br /> 
       dddddddd<br /> 
       dddddddd<br /> 
       dddddddd<br /> 
      </div> 
     </div> 
    </div> 
</div> 

Вы можете увидеть рабочую демо на http://jsfiddle.net/urc8yev5/

Для оптимизации рассмотреть возможность использования классов CSS для элементов, которые имеют те же стили в общем.

+0

Это работает только в том случае, если я знаю длину divs до начала, поэтому я знаю, как разделить столбцы , – clankill3r