CSS浮动属性以对齐div

Question

我遇到了一些严重的问题，让事情正确地向左浮动，或者更确切地说让元素浮动并且＃34; true＆＃34;左

这是我目前的输出：

这就是我希望实现的目标：

这是一个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

Floats不具备您正在寻找的布局。你需要更多的列。

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

但你必须小心交叉浏览器，他们在百分比宽度上也不是很好（来自经验）。

Answer 2

我得到了类似于你想要的东西

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 3

我认为目前不能只用css，也许在短暂的未来，但是有很多javascript解决方案，我做了一些研究Masonry，我认为是最受欢迎。你应该试一试。

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/