Nicht gleichmäßiges Gitter Float

Question

Hey ich versuche, ein schwebendes Gitter, das verschiedene Formen hat.

Hier ist mein Ziel, und was geschieht:http://imgur.com/a/wXQfA

Wie Sie eine Lücke unter dem horizontalen Stück sehen kann, gibt es. Ich versuche, es zu beheben, ohne eine Positionierung verwenden zu müssen, damit ich später Boxen hinzufügen oder verschieben kann.

Code: Html

 <li class="mediumBox"> 
      <a href="#"><img src="..." height="205" width="430"></a> 
     </li> 

     <li class="largeBox"> 
      <a href="#"><img src="..." height="430" width="430"></a> 
     </li> 

     <li class="verticleMediumBox"> 
      <a href="#"><img src="..." height="430" width="205"></a> 
     </li> 

     <li class="smallBox"> 
      <a href="#"><img src="..." height="205" width="205"></a> 
     </li> 

     <li class="smallBox"> 
      <a href="#"><img src="..." height="205" width="205"></a> 
     </li> 

     <li class="smallBox"> 
      <a href="#"><img src="..." height="205" width="205"></a> 
     </li> 

     <li class="smallBox"> 
      <a href="#"><img src="..." height="205" width="205"></a> 
     </li> 
    </ul> 
</div> 
</body> 

Css:

body{ 
background-color: #fffdf9; 
height: 100%; 
width: 100%; 
} 

#content{ 
background-color: red; 
height: auto; 
width: 900px; 
margin: 5em auto 0 auto; 
} 

#work ul{ 
list-style: none; 

} 

#work li{ 
float: left; 
margin: 10px; 
} 

#work li >a{ 
display: block; 
} 

#work li .smallBox{ 
float: left; 
display: block; 
} 

#work li .mediumBox{ 
float: left; 
display: block; 
} 

#work li .verticleMediumBox{ 
float: left; 
display: block; 
} 

#work li .largeBox{ 
float: left; 
display: block; 
} 

Hier ist mein Code:http://jsfiddle.net/jw7pV/ Aus irgendeinem Grund die jsFiddle Version nicht wie meine Chrom-Version sieht .

Answer 1

Edit: sorry hat nicht das erste Mal gelesen, dass Sie dynamische Boxen benötigen.

Wenn die Größe Ihrer Spalten skaliert (wie eine Art reaktionsschnelles Design), dann brauchen Sie etwas, das diese absoluten Positionen dynamisch setzt. Du brauchst also Javascript.

Dafür können Sie jquery Maurerarbeit oder jquery Isotop verwenden.

http://masonry.desandro.com/

http://isotope.metafizzy.co/

:)