堆栈的div？

Question

我正在尝试堆叠盒子。如果我垂直开始，我知道怎么做，比如从顶部开始向下。我的问题是，我如何横向进行？
Here is how i did it vertically
Here is how i tried doing it horizontally

 .box1 {
    float:left;
    width:150px;
    margin-right:20px;
    border:1px solid;
    height:100px;
 }
.box2 {
    float: left;
    width:150px;
    height:20px;
    margin-right:20px;
    border:1px solid;
}
.box3 {
    float: left;
    width:150px;
    margin-right:20px;
    border:1px solid;
    height:200px;
}
 .box4 {
    clear:both;
    float: left;
    width:150px;
    margin-right:20px;
    border:1px solid;
    height:200px;
}

Answer 1

我不确定我明白你的意思。这是一次艰难的尝试。您可以使用定位和z-index来实现结果。

position: absolute;
top:10px;
z-index:1;

https://jsfiddle.net/78qptee4/

顺便说一句，您可能会觉得这很有用： https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context

Answer 2

使用display: inline-block，您可以在一行上放置多个div。

Demo