html - div を揃える CSS float プロパティ

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

私はあなたが望むものに似たものを手に入れました

フィドル

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

Answer 2

現時点ではcssだけではこれを行うことはできないと思いますが、おそらく近い将来、これには多くのjavascriptソリューションがあり、いくつかの調査を行ってMasonryを見つけました。これが最も人気があると思います. あなたはそれを試してみるべきです。

Answer 3

私はあなたが探しているものへの答えを見つけました....私が編集したこのフィドルを見てください...

.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/