Свойство CSS float для выравнивания div's

Question

У меня возникли серьезные проблемы с тем, чтобы заставить вещи плавать влево правильно, или, скорее, получать элементы, чтобы плавать «правда» слева.

Это мой выходной ток:

и это то, что я надеюсь достичь:

вот jsfiddle, любая помощь будет принята с благодарностью. :)

HTML:

  <div id="content"> 

       <div class="box1"> 
        1 
       </div> 
       <div class="box2"> 
        2 
       </div> 
       <div class="box1"> 
        3 
       </div> 
       <div class="box1"> 
        4 
       </div> 
       <div class="box1"> 
        5 
       </div> 

      </div> 

CSS:

html, body { 
    margin: 0px; 
    padding: 0px; 
} 

a { 
    text-decoration: none; 
} 

#content { 
    margin: 20px 0px 0px 20px; 
    width:180px; 
    background-color: green; 
    overflow: auto; 
    padding-left: 10px; 
} 

.box1 { 
    margin: 10px 10px 0px 0px; 
    background-color: red; 
    position: relative; 
    float: left; 
    height: 50px; 
    width: 50px; 
} 

.box2 { 
    margin: 10px 10px 0px 0px; 
    background-color: blue; 
    position: relative; 
    float: left; 
    height: 110px; 
    width: 50px; 
} 

Ну и просто записочку, я предпочел бы сделать это без использования JavaScript, но я счастлив использовать это в крайнем случае.

Answer 1

Я думаю, что это не может быть сделано только с помощью CSS в данный момент, может быть, в какой-то короткое время, но есть много из javascript решений этого и сделать некоторые исследования я нашел Masonry, который, как я думаю, является самым популярным. Тебе следует это попробовать.

Answer 2

Поплавки не могут рассчитывать по интересующим вас темам. Вам нужно больше столбцов.

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts

Но вы должны быть осторожны крестик браузера, и они не являются большими в процентах ширины либо (из опыта).

Answer 3

я получил что-то похожее на то, что вы хотите

Fiddle

.box5 { 
    margin: 10px 10px 0px 0px; 
    background-color: red; 
    position:absolute; 
    float: right; 
    height: 50px; 
    width: 50px; 
    float:left; 
    left:150px; 
    top:80px; 
} 

Answer 4

я нашел ответ на то, что вы ищете .... просто увидеть эту скрипку я отредактированный ...

.box4 { 
margin: 10px 10px 0px 0px; 
background-color: red; 
position: relative; 
float:left; 
height: 50px; 
width: 50px; 
margin-top:-50px; 
margin-left:3px; 

}

http://jsfiddle.net/fWK2A/6/embedded/result/