排队浮线元件包

我具有以下设置：http://jsfiddle.net/GdDhT/排队浮线元件包

当浮动的div缠绕的线，在第二行中的第一个是不，我希望它是（由于尺寸的它上面的格）

我不能添加结算DIV这样的：

因为当屏幕越大，＃浮DIV-1，2和3将在一行中彼此相邻。出于同样的原因，我无法在特定的div上添加清除。同样的问题与：nth-child css规则。

这是一个响应式设计的一部分，所以我不能依赖于精确的宽度计算，因为div的大小有所不同。

根据屏幕大小，结果我想实现将是： enter image description here

或

enter image description here

来源

2012-09-27 Hugo Migneron

裹每个div的与最小高度一个div包装的，那么他们会像你想要的那样突破。但是这也意味着你的包装是固定的高度。这种类型的解决方案可以很好地处理jQuery，它可以抓取第一个内容div的高度，并将其余的包装div设置为高度。

我已经更新了jsFiddle，箱形阴影只是为了显示包裹的最小高度。

来源

2012-09-28 01:14:26 KnowHowSolutions

谢谢。我想避免固定高度或jQuery设置列高度，但我认为这是非常不可避免的。 –

不知道我完全理解你不同的使用情况，但补充说：

clear:left

到#floating-div-3应该在#floating-div-1下颠倒它。

来源

2012-09-27 14:09:49 cpg

我已经编辑了一些更详细的问题。我无法清除浮动div-3，因为parent-div的大小根据屏幕大小而变化（所以floating-div-3并不总是需要清除的div） –

我最近有同样的问题，最后设置我的div的高度，以便他们排队。我也有合理的，但不是总的成功，[通过jquery设置相等的列高度]（http://www.jainaewen.com/files/javascript/jquery/equal-height-columns.html）但我没有意识到纯CSS的方式来解决这个问题。严格地说，它正在做它应该做的事情。 – cpg

n个子也可能会帮助你 - 让每线清晰的第一个div它的左：

#parent-div div:nth-child(2n-1){ 
    clear: left; 
}

的jsfiddle：http://jsfiddle.net/k5DXN/1/

来源

2012-09-27 14:10:41 Ohad

我编辑了我的问题与更多细节。这个解决方案对我来说不起作用，因为一行并不总是有2个div。根据parent-div的大小，它可能包含1个浮动div或3个浮动div。标记看起来不像这样。尽管感谢您的帮助！ –

编辑我的解决方案。我不明白为什么孩子不好。我错过了什么？ – Ohad

好的，我用你的小提琴编辑了我的问题（感谢那btw），希望现在更清楚。 –

排队浮线元件包

回答

相关问题