javascript 如何浮动不同高度的元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11811858/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to float elements with different heights?
提问by matt
I'm working on a responsive webdesign that floats multiple items in 4 columns side by side. Those items have different heights and hence floating doesn't properly work.
我正在开发一个响应式网页设计，它并排浮动 4 列中的多个项目。这些项目具有不同的高度，因此浮动无法正常工作。
This is what happens at the moment:
这是目前发生的情况：
Any ideas on how to make the elements float like that:
关于如何使元素像这样浮动的任何想法：
I guess this should work with jQuery "masonry", right? However I'm working with Zepto.js and I guess a jQuery plugin wouldn't work.
我想这应该适用于 jQuery“砌体”，对吧？但是我正在使用 Zepto.js，我猜 jQuery 插件不起作用。
Is there any pure CSS (CSS3) way to that? Some trick or so?
有没有纯 CSS (CSS3) 的方法呢？有什么技巧吗？
If this wouldn't work with pure CSS or with JS is it possible to do this:
如果这不适用于纯 CSS 或 JS，是否可以这样做：
Now the second row with elements 5, 6 and 7 is not "really" floating the way you would expect it but there is a hidden line-break (clearfix) inside.
现在，包含元素 5、6 和 7 的第二行并没有像您期望的那样“真正”浮动，但是里面有一个隐藏的换行符（clearfix）。
Is there any way to that with pure CSS? E.g. use nth-child(4n+4)and a pseudo-selector like :afterto apply a line-break with content?
有没有办法用纯 CSS 做到这一点？例如使用nth-child(4n+4)和伪选择器喜欢:after应用换行符content？
Any ideas on that? Any clever tricks to make that work?
对此有何想法？有什么聪明的技巧可以使它起作用吗？
回答by Pevara
you could just apply a clear to every fifth element to force it to start all the way at the left. I think it would look something like this in css3:
你可以只对每五个元素应用一个 clear 来强制它从左边开始。我认为它在 css3 中看起来像这样：
div#wrapper > *:nth-child(4n+1) {
clear: both;
}
回答by My Head Hurts
As mentioned by @Arieljuod you can use display: inline-blockinstead of float. The beauty of this is that it will work in all browsers (including IE7+ with the hack below) and is completely fluid:
正如@Arieljuod提到可以使用display: inline-block替代float。这样做的好处是它可以在所有浏览器（包括 IE7+ 和下面的 hack）中工作并且完全流畅：
div {
...
display: inline-block;
vertical-align: top;
margin-bottom: 0.3em;
*display: inline;
*margin-right: 0.3em;
*zoom: 1;
...
}
Working example: http://jsfiddle.net/cRKpD/1/
工作示例：http: //jsfiddle.net/cRKpD/1/
回答by tao
I know I'm late to the party but someone just linked this question to another similar one and I realized this one misses the flexbox solution...
(which was not around when the question was asked).
我知道我迟到了，但有人只是将这个问题与另一个类似的问题联系起来，我意识到这个问题错过了 flexbox 解决方案......
（提出问题时它不在身边）。
Add the desired vendor prefixes and remove unnecessary in your CSS
添加所需的供应商前缀并删除 CSS 中不必要的前缀
.parent {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: -moz-box;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
}
回答by Matt Coughlin
First option
第一个选项
CSS multi-column layout, once it's adequately standardized and supported, may offer a flexible way to do this.
CSS 多列布局，一旦得到充分的标准化和支持，就可以提供一种灵活的方式来做到这一点。
The only other CSS solution that comes to mind, though it may not be adequately responsive, is to group the elements in column containers (1 and 5, then 2 and 6, then 3 and 7, then 4).
唯一想到的其他 CSS 解决方案是将列容器中的元素分组（1 和 5，然后是 2 和 6，然后是 3 和 7，然后是 4），尽管它可能没有足够的响应能力。
Aside from those two options, I believe JS is required.
除了这两个选项，我相信 JS 是必需的。
回答by BK14
A bit late but put 1 in an additional divider. Then put 7 in that divider (you will have to adjust the divider so that 7 appears below 1). Might be useful to use overflow:visible in this divider.
有点晚了，但将 1 放入额外的分隔符中。然后将 7 放入该分隔符（您必须调整分隔符，使 7 出现在 1 下方）。使用溢出可能很有用：在此分隔符中可见。
回答by arieljuod
for the second option, instad of "float: left" use "display: inline-block", you can even combine that with a text-align: center to always fill 100% except the last line
对于第二个选项，"float: left" 的 instad 使用 "display: inline-block"，您甚至可以将它与 text-align: center 结合起来以始终填充 100% 除了最后一行
for the first option you could put 1 and 5 in onw container, 2 and 6 on another, and so one, then you float those containers
对于第一个选项，您可以将 1 和 5 放在一个容器中，将 2 和 6 放在另一个容器中，依此类推，然后您将这些容器浮动
回答by Hyman
for the last one, you could surround each group of four with a container. Then float the divs inside of the containers, if you don't want to or can't do this manually, you could probably do this easily with JavaScript.
对于最后一个，您可以用一个容器将每组四人围起来。然后将 div 浮动在容器内，如果您不想或不能手动执行此操作，您可以使用 JavaScript 轻松完成此操作。
