html - 让 Div 与多行并排放置

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;
}

这是一个 fiddle 链接:http://jsfiddle.net/ztdgz24n/1/