如何垂直对齐HTML对象以覆盖页面

Question

我有大约10个或更多的物体，宽度相同但高度不同。我想把它们像下面的图像一样，完全覆盖页面。这是我所做的，但它不起作用：

http://jsfiddle.net/mhmdshv/e0xvcgnw/

HTML：

<div id="book">
<div class="book" style="height:310px; width:200px">...</div>
<div class="book" style="height:100px; width:200px">...</div>
<div class="book" style="height:500px; width:200px">...</div>
<div class="book" style="height:400px; width:200px">...</div>
 <div class="book" style="height:150px; width:200px">...</div>
<div class="book"style="height:200px; width:200px">...</div>
<div class="book" style="height:40px; width:200px">...</div>

CSS：

   body{padding:25px;}
#book{text-align:center;outline:5px solid aqua;}
.book{
    display:inline-block;

    border:1px dotted silver;background-color:pink;margin:9px;text-align:center;
}

没有相同高度的物体之间存在间隙......我希望它消失。有什么想法吗？

谢谢！

Answer 1

你是说这样的意思吗？ demo
我添加了2个div，

.left{
    float:left;
    width:200px;
}
.right{
    float:left;
    margin-left:18px;
    width:200px;
}

Answer 2

Actualy没有css方法可以在不操纵dom的情况下实现它。在您的情况下，您可以添加“左”和“右”列来构造元素以避免瞎扯。

你也可以使用像MASONRY

这样的comon插件

还看看这个答案：

How to get different height html divs to float up

CSS Floating Divs At Variable Heights

Answer 3

尝试发现css3 列属性 也许这个来源会帮助你：
http://cssdeck.com/labs/css-only-pinterest-style-columns-layout

Answer 4

使用masonry创建了这个：

var container = document.querySelector('#book');
var msnry = new Masonry(container, {
    // options
    columnWidth: 100,
    itemSelector: '.book',
    margin: 0 auto;
});

body {
    padding:25px;
}
#book {
    text-align:center;
    outline:5px solid aqua;
}
.book {
    width: 45%;
    border:1px dotted silver;
    background-color:pink;
    margin:9px;
    text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://masonry.desandro.com/masonry.pkgd.min.js"></script>

<div id="book" class="js-masonry">
    <div class="book" style="height:310px;">...</div>
    <div class="book" style="height:100px;">...</div>
    <div class="book" style="height:500px;">...</div>
    <div class="book" style="height:400px;">...</div>
    <div class="book" style="height:150px;">...</div>
    <div class="book" style="height:200px;">...</div>
    <div class="book" style="height:40px;">...</div>
</div>