交错的文本块

Question

我试图创建一种交错的文本框布局（参见附图）。到目前为止，我没有成功，我希望你们能够提供帮助。目前第二行没有浮动到完整的左侧，而是停留在第二列级别。

THX

Staggered lay-out

[1]: https://i.stack.imgur.com/jZyuY.png

HTML

<section class= contentpage>
    <p> 1st text block </p>
    <p> 2nd text block </p>
    <p> 3rdt text block </p>
    <p> ... text block </p>
    <p> ... text block </p>
    <p> ... text block </p>
    <p> ... text block </p>
    <p> ... text block </p>
</section>

CSS

.contentpage p {
display: block;
float:left;
width: 31%;
margin: 15px
}