Question

所以我有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不会向上滑动400px以便恰好低于＃1。（当然）......它在左侧，但从顶部600px清除＃2的底部。等...

我如何让div滑入空白区域，是否可以使用css？可能是jquery？我知道我可以写列div以标记它，但由于div的数量不断变化，高度因内容而异。因为我们真的不关心订单，所以摆脱空间会很好。

有什么想法吗？

Answer 1

不幸的是，对于纯CSS来说这是不可能的，你需要为每列提供单独的div。幸运的是，您可以使用jQuery实现此目的。这样的事情可以解决问题：

$(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'); });

Answer 2

我不确定我是否正确理解了这个问题。我猜你希望它看起来像我刚刚制作的这个例子http://jsbin.com/emeja

我使用的HTML就像这样：

<div style="height: 200px" class="box-left">some content here</div>
<div style="height: 600px" class="box-right">some content here</div>
<div style="height: 300px" class="box-left">some content here</div>
<div style="height: 200px" class="box-right">some content here</div>

CSS就像这样：

.box-left { float: left; clear: left; width: 48%;}
.box-right { float: right; clear: right; width: 48%;}

诀窍是floating方框，清除它们以便框不会出现在同一列中的方框旁边。

Answer 3

你们必须将colunms拆开并将每个第二个div分配给另一个容器。

<div id="content" style="overflow: hidden;">
  <div id="left" style="width: 48%; float: left;">
    <!-- This is where every odd numbered div goes -->
  </div>
  <div id="left" style="width: auto; margin-left: 50%;">
    <!-- This is where every even numbered div goes -->
  </div>
</div>

如果您在for循环中选择内容时无法创建这些任意div，这将有所帮助：

// Render Header
for(int i = 0; i < list.count(); i++)
{
   if (i % 2 == !)
     continue;

   // Render my div inside left colunm
}

// Render In-Between

for(int i = 0; i < list.count(); i++)
{
   if (i % 2 == !)
     continue;

   // Render my div inside left colunm
}

// Render Footer

此代码依靠模数从列表中选择您的项目，并将它们放在正确的位置，然后您的内部div应该位于colunm中的正下方。

Answer 4

你可以在IE中完成它（Divs会很好地依偎）但在FF等中不起作用（参见this page的例子 - 右边的链接使用这个理论 - 我应该知道，我试着解决它！）

然而，这是左派的一个想法 - 可能看起来有点过于复杂，但是......

JQuery treeMap？

转到http://newsmap.js并抓挠你的大脑试图弄清楚他们是如何做到的？这听起来很疯狂，但是，而treeMap是你想要实现的更复杂的版本。

罗布

使用css或javascript进行div堆叠/布局

4 个答案: