<div id="container">
<div class="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac magna non augue porttitor scelerisque ac id diam. Mauris elit velit, lobortis sed interdum at, vestibulum vitae libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque iaculis ligula ut ipsum mattis viverra. Nulla a libero metus. Integer gravida tempor metus eget condimentum. Integer eget iaculis tortor. Nunc sed ligula sed augue rutrum ultrices eget nec odio.. </div>
<div class="box">Fusce a metus eu diam varius congue nec nec sapien. Vestibulum orci tortor, sollicitudin ac euismod non, placerat ac augue. Nunc convallis accumsan justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec malesuada vehicula lectus, viverra sodales ipsum gravida nec. Integer gravida nisi ut magna mollis molestie. Nullam pharetra accumsan sagittis. Proin tristique rhoncus orci, eget vulputate nisi sollicitudin et. Quisque lacus augue, mollis non mollis et, ullamcorper in purus. Morbi et sem orci. Praesent accumsan odio in ante ullamcorper id pellentesque mauris rhoncus. Duis vitae neque dolor. Duis sed purus at eros bibendum cursus nec a nulla. Donec turpis quam, ultricies id pretium sit amet, gravida eget leo.
</div>
<div class="box">Vivamus vulputate mattis magna ac pretium. Nulla facilisi. Praesent ut quam quam. Suspendisse non lorem at ligula convallis convallis. Phasellus varius, felis nec ultrices pulvinar, tortor massa semper nunc, id auctor elit felis eget libero. Sed in turpis quam. In ultrices, eros sit amet vehicula mattis, nisi nisi tincidunt neque, a imperdiet lorem nibh eget libero. Vivamus tempus nunc odio, ut iaculis nunc.</div>
<div class="box">Donec vel sapien lacus, sed lobortis nisl. Integer a dui nulla, non convallis massa. Quisque posuere lobortis purus id rutrum. Ut congue, leo ut venenatis pharetra, enim mi luctus nisi, eget sollicitudin dolor sapien ut felis. Etiam a augue nisi, vel vehicula erat. Nullam ultricies massa lectus. Vestibulum et viverra est. Vestibulum vulputate fringilla augue, non interdum enim ultrices sed. Vivamus sagittis pretium tempor. Aliquam erat volutpat. Sed accumsan condimentum eros vitae scelerisque.</div>
<div class="box">Phasellus turpis augue, semper id facilisis a, ultrices vel purus. Donec ut risus purus, non convallis justo. Sed tempor consectetur condimentum. Fusce ipsum nulla, porta et euismod eget, aliquam sit amet nisi. Phasellus tempus enim in nisl porta placerat. Vivamus lectus turpis, tincidunt eget pellentesque et, malesuada sit amet diam. In hac habitasse platea dictumst. Suspendisse potenti. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam tristique mollis ligula, non sagittis justo interdum sit amet. Cras blandit turpis ut lorem adipiscing convallis. Donec ultrices erat at massa vehicula sit amet feugiat purus accumsan. Sed quis lacus sem, sed pretium orci. In hac habitasse platea dictumst. Aliquam suscipit, velit nec ultrices porttitor, libero arcu vulputate nisi, ut lacinia massa lectus et nulla.</div>
</div>
#container {
width: 500px;
border: 1px solid black;
margin: 0 auto;
overflow: auto;
}
.box {
width: 45%;
margin: 5px;
float: left;
font-family: sans-serif;
font-size: 12px;
border: 1px solid green;
}
我基本上想要它，以便第3个盒子（“Vivamus vulputate”）紧贴第一个盒子（“Lorem ipsum”）。
我知道有一种方法可以使用一些CSS魔法来做到这一点，我只是记不起来......
答案 0 :(得分：4)
这就是网络的本质，这就是jQuery Masonry诞生的原因：
目前的布局无法满足您的预期效果。但是，您可以通过定义所有“左”.box列float:left; clear:left;和所有“正确”.box列float:right; clear:right;来实现类似的目标......
<强>结果：
答案 1 :(得分：1)
这种魔法确实存在，被称为css列：http://jsfiddle.net/JyVUD/（例如，对于webkit，使其在FF中工作，Opera只需添加所需的前缀）。
但是，因为经常发生这样的魔术，某些浏览器，例如IE，不支持它。
答案 2 :(得分：1)
这是通过一些JavaScript Fiddle来完成的，我保持简单（我使用的是mootools），因为你是如何设置小提琴的。
我工作，但我确信它可以做得更好/更新，并且可能不具备跨浏览器功能，但我会发布，所以你可以看到。