исправить строки начальной загрузки CSS

Question

им работать на шаблоне HTML, используя Bootstrap Css я хочу, чтобы это выглядело как Pinterest (динамической компоновки) , как вы можете видеть на скриншоте ниже него не работает, как Pinterest

здесь код я использую HTML

<div class="row"> 
<div class="span2"> 
TITLE Goes Here 
Image 
any content goes here 
</div> 
<div class="span2"> 
TITLE Goes Here 
Image 
any content goes here 
</div> 
<div class="span2"> 
TITLE Goes Here 
Image 
any content goes here 
</div> 
<div class="span2"> 
TITLE Goes Here 
Image 
any content goes here 
</div> 
<div class="span2"> 
TITLE Goes Here 
Image 
any content goes here 
</div> 

</div>///End or Row div 

я есть попробовать этот код http://cssdeck.com/labs/css-only-pinterest-style-columns-layout

НО он не работает на Firefox и это не подходит мой код

так не оставлять его для меня как решение

Спасибо команде!

Answer 1

Удалите строку CSS column-fill, и она будет работать как в webkit, так и в fireFox.

#columns { 
    -webkit-column-count: 3; 
    -webkit-column-gap: 10px; 
    /*-webkit-column-fill: auto; REMOVE */ 
    -moz-column-count: 3; 
    -moz-column-gap: 10px; 
    /*-moz-column-fill: auto; REMOVE */ 
    column-count: 3; 
    column-gap: 15px; 
    column-fill: auto; 
} 

Когда вы говорите: «Это не подходит мой код», я не понимаю, что вы имеете в виду, потому что почти соответствует код в точности:

Они:

<div id="columns"> 
    <div class="pin"> 
    stuff in here 
    </div> 
</div> 

У вас есть :

<div class="row"> 
    <div class="span2"> 
    stuff in here 
    </div> 
</div> 

http://cssdeck.com/labs/qwexko5i

ПРИМЕЧАНИЕ. Существуют другие способы достижения этой цели без использования столбцов CSS3 и просто с использованием display: inline-block, но сначала вам нужно попробовать код.