问题
I'm trying to make my "divs" stack up. The divs will always be different heights and they create "white space" gaps. I want to remove this white space and "butt" them up next to each other.
This seems like it would be very simple, but I'm having a very hard time finding a solution! I only have one requirement for this, the HTML given in the JSfiddle cannot be edited/added to. I have to do this purely with CSS. Does anyone have a solution?
http://jsfiddle.net/ZMvdy/1/
HTML
<div class="small">small</div>
<div class="xlarge">xlarge</div>
<div class="medium">medium</div>
<div class="xlarge">xlarge</div>
<div class="large">large</div>
<div class="xlarge">xlarge</div>
CSS
div { background: lime; float: left; width: 48%; margin: 1% 1%; display: inline-block; overflow: hidden; vertical-align: top; }
.small { height: 100px; }
.medium { height: 150px; }
.large { height: 200px; }
.xlarge { height: 300px; }
回答1:
Best thing I can come up with for a CSS only solution, is playing around with float:left and float:right on different divs. But you will probably still need javascript to assign the right properties to the right divs.
Here is an example using float:right;
: http://jsfiddle.net/ZMvdy/6/
There are script that do this automatically for you, they basically look at the size of the elements and then use absolute positioning to fit them all together.
回答2:
Another solution to this could be making use of the old "column" idea. Stack them making two columns as such:
<section id = "leftColumn">
<div class="small">small</div>
<div class="medium">medium</div>
<div class="large">large</div>
</section>
<section id = "rightColumn">
<div class="xlarge">xlarge</div>
<div class="xlarge">xlarge</div>
<div class="xlarge">xlarge</div>
</section>
Then apply CSS on them as such :
div {
background-color:lime;
margin:2%;
display:block;
}
#leftColumn {
float:left;
display:inline-block;
width:50%;
}
#rightColumn {
float:left;
display:inline-block;
width:50%;
}
.small {height: 100px; }
.medium {height: 150px; }
.large { height: 200px; }
.xlarge { height: 300px;font-size:28px; }
This will give you the desired effect you are looking for.
See this here: http://jsfiddle.net/9YtDs/
Leon's answer is a good solution. However, since you are looking for an IE8 solution, I provided this answer.
NOTE: By default, the section tag doesn't work in IE8. However, there are ways you can make it work in IE8.
Kindly look at http://www.nickyeoman.com/blog/html/118-html5-tags-in-ie8 if you need help for that.
Hope this helps.
回答3:
If you are looking to have a single column (or if that is acceptable), you could add 'clear:left' to your div css.
You could also mix it up by having some classes 'float:right' while others 'clear:left'.
You will have to play with it to get exactly what you are looking for, but I warn you: if you cannot change the HTML at all (including class assignments), then it may be difficult to accomplish consistent behavior.
来源:https://stackoverflow.com/questions/23160090/how-to-remove-white-space-from-different-height-divs-and-make-them-suck-up-to