问题
Browser support: I need this to work with IE8+. CSS3 + polyfill solution accepted, but CSS only solution even better.
I have a series of divs positioned side-by-side.
I want their height to be equal to the heighest div in the "row".
The key here is that the number of divs next to another varies (from 4 by row to 3 by row).
This is because this is a responsive design, in which we set the width of a product to 25% by default, but 33% when in smaller screen size.
See the code below, and the jsfiddle also http://jsfiddle.net/gLk7u/
<div id="wrapper">
<div class="item">item 1<br>more text</div>
<div class="item">item 2</div>
<div class="item">item 3</div>
<div class="item">item 4</div>
<div class="item">item 5</div>
<div class="item">item 6</div>
<div class="item">item 7</div>
<div class="item">item 8</div>
</div>
.item {
width: 25%;
margin-top: 5px;
float: left;
background-color: red;
}
@media (max-width: 640px){
.item {
width: 33%;
}
}
I found that display: table
along with the other display: table-cell
& display: table-row
could be good but in only the case of a static number of divs per row (so not good for my case), since you need to add a wrapping div (acting as a row). But maybe I missed something?
See How do I achieve equal height divs (positioned side by side) with HTML / CSS ? and also HTML/CSS set div to height of sibling
Finally I found that flexbox might answer my specs. And indeed after playing around I made it work. The only thing is that flexbox is not supported by older browser (support by IE10+, chrome 20+, safari 3.1+, firefox 2+) read more about support http://css-tricks.com/snippets/css/a-guide-to-flexbox#browser-support so I probably would need to add the flexie polyfill, https://github.com/doctyper/flexie, to support this on older browser. I hear you will say "but smaller screen sizes are on modern device so a polyfill is not needed", but I want my website to still be able to run if you resize your window in IE8, IE9 or any other browser not supporting flexbox.
read more about flexbox http://css-tricks.com/snippets/css/a-guide-to-flexbox/
see the code using the flexbox model below & the jsfiddle also http://jsfiddle.net/4T2Tm/1/
<ul class="flex-container">
<li class="flex-item">1 and 2 <br> and more</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
<li class="flex-item">6</li>
</ul>
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
}
.flex-item {
background: tomato;
width: 23%;
margin: 10px 1% 0 1%;
float: left;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
}
@media (max-width: 640px){
.flex-item {
width: 33%;
}
}
If you provide an answer, please provide the jsfiddle that comes with it. This is fairly complex stuff after all.
回答1:
You've ruled out the only two possible ways to do what you're asking for with pure CSS (at this point in time -- any newer CSS techniques would not work in your desired browsers). So the answer is no, this cannot be done.
回答2:
It's early days yet, and I have not tried to break this solution everywhere (or even looked at it on IE), but I have just come up with something that is working so far on the devices and browsers I have here.
The divs I want to wrap are all class="info"
In my CSS media queries I have:
@media only screen and (min-width: 360px) and (max-width: 400px) {
.info{ width: 50%; } /* 2 columns */
.info:nth-child(2n+3) { clear:left; }
}
@media only screen and (min-width: 400px) and (max-width: 760px) {
.info{ width: 33%; } /* 3 columns */
.info:nth-child(3n+4) { clear:left; }
}
@media only screen and (min-width: 760px) and (max-width: 900px) {
.info { width: 25%; } /* 4 columns */
.info:nth-child(4n+5) { clear:left; }
}
@media only screen and (min-width: 900px) and (max-width: 1600px) {
.info { width: 20%; } /* 5 columns */
.info:nth-child(5n+6) { clear:left; }
}
It must have both min and max width specified or the nth-child spills over into other screen sizes.
回答3:
Specifying min-height value as the height of the most height div. Say, height of the first div for all others...
CSS only for IE8+
<!--[if IE 8]>
<style>...</style>
<![endif]-->
来源:https://stackoverflow.com/questions/22253122/make-variable-number-of-divs-positioned-side-by-side-of-equal-height-with-html-c