2016-08-20 3 views
1

Мне нужна помощь.Boostrap динамическое положение div

я имею два родителя DIV,

<div class="container-fluid" > 
<div class="row-fluid" id="id"> 

в этих DIV я поставил другие DIV, созданные с помощью вызова Ajax.

Я создал div, который будет заполнен данными. ДИВ является:

 <div class="col-sm-3 col-md-5 space"> 
      <h2 style="color:#900000">###</h2> 
      <p class="lead">### 
      <p> 
      <p style="text-align: right"><i class="fa fa-clock-o"></i>12/5/24</p> 
      <div class="thumbnail"> 
       <img src=""> 
      </div> 

      <div class="caption"> 
       <p>Differetn lenght of data -<<< PROBLEM IS HERE 
        text.</p> 


       <a href=download="sss" class="padd">Allegato: ssss'</a> 
       <br> 
      </div> 
     </div> 

Аякса вызов сделать 5 ДИВ Из них с разной длиной.

this is now how i want

EDIT кладочных enter image description here

ответ

0

Используйте этот masonry plugin

HTML

<div class="container masonry"> 
    <div class="block masonry-brick medium"></div> 
    <div class="block masonry-brick medium"></div> 
    <div class="block masonry-brick large"></div> 
    <div class="block masonry-brick medium"></div> 
    <div class="block masonry-brick medium"></div> 
    <div class="block masonry-brick small"></div> 
    <div class="block masonry-brick medium"></div> 
    <div class="block masonry-brick small"></div> 
    <div class="block masonry-brick small"></div> 
    <div class="block masonry-brick medium"></div> 
    <div class="block masonry-brick large"></div> 
    <div class="block masonry-brick medium"></div> 
    <div class="block masonry-brick medium"></div> 
    <div class="block masonry-brick large"></div> 
    <div class="block masonry-brick medium"></div> 
    <div class="block masonry-brick medium"></div> 
    <div class="block masonry-brick small"></div> 
    <div class="block masonry-brick medium"></div> 
    <div class="block masonry-brick small"></div> 
    <div class="block masonry-brick small"></div> 
    <div class="block masonry-brick medium"></div> 
    <div class="block masonry-brick large"></div> 
</div> 

JS

$('.container').masonry({ 
    // options 
    itemSelector : '.block', 

}); 

For demo

+0

третий ДИВ хотят встать –

+0

другой в порядке –

+0

я редактировать вопрос –

Смежные вопросы