How to float elements with different heights?

问题

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.

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.

Is there any pure CSS (CSS3) way to that? Some trick or so?

If this wouldn't work with pure CSS or with JS is it possible to do this:

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.

Is there any way to that with pure CSS? E.g. use nth-child(4n+4) and a pseudo-selector like :after to apply a line-break with content?

Any ideas on that? Any clever tricks to make that work?

回答1:

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:

div#wrapper > *:nth-child(4n+1) {
   clear: both;
}

jsFiddle demo

回答2:

As mentioned by @Arieljuod you can use display: inline-block instead of float. The beauty of this is that it will work in all browsers (including IE7+ with the hack below) and is completely fluid:

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/

回答3:

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).

Add the desired vendor prefixes and remove unnecessary in your 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;
}

example

回答4:

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

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

回答5:

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.

回答6:

First option

CSS multi-column layout, once it's adequately standardized and supported, may offer a flexible way to do this.

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).

Aside from those two options, I believe JS is required.

回答7:

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.

来源：https://stackoverflow.com/questions/11811858/how-to-float-elements-with-different-heights

标签

javascript

jquery

css

css-float