所以我有4个div(实际上我还有很多,但这将简化问题).我想在两列中显示它们. 4个div的高度不同.最后的实际div数量会有所不同.
所以如果我有这个
<div id="1" style="height: 200px" class="inline">some content here</div>
<div id="2" style="height: 600px" class="inline">some content here</div>
<div id="3" style="height: 300px" class="inline">some content here</div>
<div id="4" style="height: 200px" class="inline">some content here</div>
这样的造型
.inline { display: inline-block; vertical-align: top; width: 48%;}
因此,#1会向左走,然后#2会向右推,这很不错,但是#3不会向上滑动400像素以恰好位于#1下方. (当然)…它位于左侧,但距顶部600px,清除了#2的底部.等等…
我如何让div滑入空白处,css是否可能？ jQuery的也许？
我知道我可以写div列来对其进行标记,但是由于div的数目不断变化并且高度根据内容而有所不同.最好摆脱空间,因为我们并不真正在乎订单.
有什么想法吗？
最佳答案
不幸的是,这对于纯CSS是不可能的,您将需要为每个列使用单独的div.幸运的是,您可以使用jQuery实现此目的.这样的事情应该可以解决问题：
原文链接：https://www.f2er.com/css/530766.html$(function() {
var odd_divs = $('div.inline:odd');
var even_divs = $('div.inline:even');
var left = $('<div id="left-column" class="column"/>').append(odd_divs);
var right = $('<div id="right-column" class="column" />').append(even_divs);
$('#somewhere').append(left).append(right);
});
并将您的CSS更改为：
.column {
width: 50%;
display: inline-block;
vertical-align: top;
}
编辑
正如Brian McKenna指出的那样,实际上有可能使用CSS浮点数来达到这种效果.您可以使用jQuery来添加类名,如下所示：
$(function() {
$('div.inline:odd').addClass('Box-left');
$('div.inline:even').addClass('Box-right');
});
