Css 浮动div以垂直对齐

我希望以下浮动div垂直排列：box1类的第四个div 应在其上方div的5px边距后的底部开始，而不是在整个上一行中最低div的底部，与以下div相同。 我怎样才能用css做到这一点。 如果有另一种方法仅通过css实现这一点，则浮动不是必须的

html:

<div id="conainer">
    <div class="box1">
            Lorem ipsum dolor sit amet, consectetur adipisicing eli
    </div>
        <div class="box1">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna al
    </div>
        <div class="box1">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
    </div>
        <div class="box1">
            Lorem ipsum dolor sit amet, consectetur adipisicin
    </div>
        <div class="box1">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  </div>
        <div class="box1">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ul
    </div>
</div>

---

CSS本身可能很难设置这样的规则来使用。但是，如果您知道哪些框将在哪些框的顶部对齐，则可以设置如下列：

<div id="conainer">
    <div class="column">
        <div class="box1">
            Lorem ipsum dolor sit amet, consectetur adipisicing eli
        </div>
        <div class="box1">
            Lorem ipsum dolor sit amet, consectetur adipisicin
        </div>
    </div>
    <div class="column">
        <div class="box1">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna al
        </div>
        <div class="box1">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
        </div>
        <div class="box1">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  </div>
        </div>
    <div class="column">
        <div class="box1">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ul
        </div>
    </div>
</div>

---

同样，根据你想要达到的目标，等高div可能有助于解决你的问题

不幸的是，CSS在这里帮不了你。如果有第三行，这个答案可能不适合这个问题。取决于提问者想要什么，它可能会。如果有第三行或第四行，他所要做的就是将他想要的框添加到它们各自的列中。然而，对于一个具有动态大小的盒子的非常流畅的解决方案，我认为CSS本身不够强大……我猜这是网格设计/定位的基础。。。没有js

<div id="conainer">
    <div class="column">
        <div class="box1">
            Lorem ipsum dolor sit amet, consectetur adipisicing eli
        </div>
        <div class="box1">
            Lorem ipsum dolor sit amet, consectetur adipisicin
        </div>
    </div>
    <div class="column">
        <div class="box1">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna al
        </div>
        <div class="box1">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
        </div>
        <div class="box1">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  </div>
        </div>
    <div class="column">
        <div class="box1">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ul
        </div>
    </div>
</div>

#conainer {
    display:block;
}
.column {
    width: 31%;
    display:inline-block;
    float:left;
}
.box1 {
    border: thin solid black; 
    margin:5px; 
    float: bottom;
}