2010-04-15 137 views
3

所以我有4个div(我其实有更多,但这将简化问题)。我想在两列中显示它们。 4个div的高度不同。最后实际div的数量会有所不同。 所以,如果我有这个div堆叠/布局与CSS或javascript

<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的底部。等...

我怎么会得到的divs滑入空的空间,是否有可能与CSS? jquery也许? 我知道我可以写专栏来标记它,但由于div的数量不断变化,高度因内容而异。因为我们不关心订单,所以摆脱空间会很好。

有什么想法?

+0

尝试浮动的div左,右交替 – 2010-04-15 22:54:42

+2

题外话,但DOM元素的ID不能以数字开头。 – inkedmn 2010-04-15 22:57:37

+0

我知道,这是为了清晰...对不起 – liz 2010-04-15 23:24:37

回答

2

不幸的是,这对于纯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; 
} 

编辑

布赖恩·麦肯纳指出,实际上有可能使用来达到这种效果CSS浮动。您可以使用jQuery的类名添加为这样:

$(function() { 
    $('div.inline:odd').addClass('box-left'); 
    $('div.inline:even').addClass('box-right'); 
}); 
+0

我有兴趣,如果有一种方法来实现它除了浮动... 感谢以上,一个有趣的解决方案...结合浮动与自动添加样式... – liz 2010-04-15 23:26:12

+0

@liz - 我不明白。这个答案涉及花车,它也不适用于JavaScript禁用的人。我可以看到它自动获得的好处,但大多数情况下,可访问性应该是最重要的指标。 – 2010-04-15 23:41:26

+0

好吧,我玩这个一些,实际上你的解决方案的第一个没有浮点数比使用浮点数更可靠。 – liz 2010-04-16 02:52:42

0

你很多时候不得不分裂这个柱子,并把每个第二个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 

此代码relys上模从你的列表中选择您的项目并且应该把它们放在正确的地方,然后你的内部div应该坐在一个柱子里面。

1

我不确定是否正确理解问题。我猜你想让它看起来像这样的例子,我刚才提出,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这些框,清除它们,以便框不会显示在同一列中的框旁边。

0

你可以做到这一点在IE(div一定依偎-了很好),但不会在FF工作等(见this page一个例子 - 链接到正确运用这一理论 - 我应该知道,我试图修复它)

然而,这里是从左外野思想 - 似乎是过于复杂的问题一点点,但...

JQuery treeMap

转到​​并划伤你的大脑试图弄清楚他们是如何做到的?这听起来很疯狂,但是,和treeMap是你想要实现的更复杂的版本。

罗布