如何从不同高度的div上删除空白，并使它们“吸”起来。对彼此？ [英] How to remove white space from different height divs and make them "suck up" to each other?
问题描述
我正在尝试将我的 divs堆叠起来。 div的高度总是不同的，它们会产生空白间隙。我想删除此空白区域并将它们对接在一起。
I'm trying to make my "divs" stack up. The divs will always be different heights and they create "white space" gaps. I want to remove this white space and "butt" them up next to each other.
这似乎很简单，但是我很难过时间找到解决方案！我对此只有一个要求，JSfiddle中给定的HTML不能被编辑/添加到其中。我必须完全使用CSS来做到这一点。有没有人有办法解决吗？
This seems like it would be very simple, but I'm having a very hard time finding a solution! I only have one requirement for this, the HTML given in the JSfiddle cannot be edited/added to. I have to do this purely with CSS. Does anyone have a solution?
HTML
<div class="small">small</div>
<div class="xlarge">xlarge</div>
<div class="medium">medium</div>
<div class="xlarge">xlarge</div>
<div class="large">large</div>
<div class="xlarge">xlarge</div>
CSS
div { background: lime; float: left; width: 48%; margin: 1% 1%; display: inline-block; overflow: hidden; vertical-align: top; }
.small { height: 100px; }
.medium { height: 150px; }
.large { height: 200px; }
.xlarge { height: 300px; }
推荐答案
我能为CSS想到的最好的东西唯一的解决方案是在不同的div上使用float：left和float：right。但是您可能仍然需要JavaScript将正确的属性分配给正确的div。
Best thing I can come up with for a CSS only solution, is playing around with float:left and float:right on different divs. But you will probably still need javascript to assign the right properties to the right divs.
以下是使用 float：right; 的示例： http://jsfiddle.net/ZMvdy/6/
有些脚本会自动执行此操作对您来说，它们基本上是在看元素的大小，然后使用绝对定位将它们放在一起。
There are script that do this automatically for you, they basically look at the size of the elements and then use absolute positioning to fit them all together.
这篇关于如何从不同高度的div上删除空白，并使它们“吸”起来。对彼此？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
