html - CSS浮动属性对齐div

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

浮动不能满足您正在寻找的布局。你需要更多的东西。

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

但是您必须小心跨浏览器，并且它们在百分比宽度方面也不是很好（根据经验）。

Answer 2

我得到了和你想要的相似的东西

小提琴

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