问题
I have a list of lists. Sublists are floated left. See http://jsfiddle.net/P4Psf/
Is there a way to force these columns to be the same height as their neighbors (i.e. have Element 1, 2 and 3 equal height, then 4, 5, 6 equal height (but of course different from 1,2,3) etc. etc.)?
At the moment 7 and 8 put themselves below 5 and 6, where they actually should be below 4 and 5.
I of course could do this using javascript, but I'm hoping that there is a pure CSS solution that works in (at least) the modern browsers?
回答1:
Add this to your CSS:
ul.themenboxen > li:nth-child(3n+1) {
clear: both;
}
That will literally search in this form:
- Find all elements which match
:nth-child(3n+1), meaning every third element inside its parent. - Filter only those who are
lis. - Filter only those who are direct descendants of
ul.themenboxen.
Or in english, find every third element directly inside of ul.themenboxen, and apply clear: both on it.
Note: I'm not sure about lower IE support.
Example
来源：https://stackoverflow.com/questions/7204565/make-floating-list-elements-equal-height-with-pure-css