让Divs与多行并排

Question

所以我正在制作一个pinterest风格的页面，每行有四个div，可以有无限数量的行。我遇到的问题是，如果div的高度不尽相同，那么div将遍布整个地方。

这就是我的意思：

会发生什么：

实际发生的事情：

我的代码（我需要保持简单，不能为每个列做四个更大的div，因为我添加了一些PHP内容）：

        <div id="newsList">
            <div>
                <img src="#">
                <p>Text.</p>
            </div>
            <div>
                <img src="#">
                <p>Text.</p>
            </div>
            <div>
                <img src="#">
                <p>Text.</p>
            </div>
            <div>
                <img src="#">
                <p>Text.</p>
            </div>
            <div>
                <img src="#">
                <p>Text.</p>
            </div>
            <div>
                <img src="#">
                <p>Text.</p>
            </div>
            <div>
                <img src="#">
                <p>Text.</p>
            </div>
            <div>
                <img src="#">
                <p>Text.</p>
            </div>
        </div>

CSS：

#newsList {
   width: 1330px;
   margin: 0 auto 0 auto;
   display: table;
   height: auto;
   overflow: auto;
}

#newsList > div {
   width: 313px;
   height: auto;
   float: left;
   cursor: pointer;
   margin-left: 15px;
   position: relative;
   overflow: auto;
   border-radius: 2px;
   background-color: white;
   margin-bottom: 16px;
   display: inline-block;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22);
   transition: all 0.3s ease-in-out;
}

Answer 1

将包含div的外部容器div放在您想要放置的内容div中，这样它们的长度可以与网站pinterest的长度不同。

.container {
width:150px;
float:left;
}
.Blue {
width:140px;
padding:2px;
margin:5px;
background-color:blue;
}
.Green {
width:140px;
padding:2px;
margin:5px;
background-color:green;
}

这是一个小提琴链接：http://jsfiddle.net/ztdgz24n/1/