使可变数量的div与HTML / CSS（响应式设计）并排高度相等？ [英] make variable number of divs positioned side by side of equal height with HTML/CSS (responsive design)?

问题描述

浏览器支持：我需要使用IE8 +。 CSS3 + polyfill解决方案接受，但CSS只有解决方案更好。

我有一系列的div并排放置。

我想要它们的高度等于行中最高的div。

这里的关键是div的数目（从4行到3行）。

这是因为这是一种响应式设计，我们将产品的宽度默认设置为25％，而在较小屏幕尺寸时设置为33％。 p>

请参阅下面的代码，jsfiddle还 http：// jsfiddle。 net / gLk7u /

 < div id =wrapper> 
< div class =item> item 1< br>多个文字< / 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％; 
} 
} 
  

我发现 table 以及其他 display：table-cell & display：table-row 可能很好，但只有在每行静态div数的情况下（因此不适合我的情况）因为你需要添加一个包装div（作为一个行）。但也许我错过了什么？

查看
HTML / CSS将div设置为兄弟的高度

最后，我发现flexbox可能会回答我的specs。而且确实在玩过之后，我做了它的工作。唯一的事情是，旧版浏览器不支持flexbox（支持IE10 +，chrome 20+，safari 3.1+，firefox 2+）了解有关支持http://css-tricks.com/snippets/css/a-guide-to-flexbox#browser-support 的详情我可能需要将flexie polyfill（ https://github.com/doctyper/flexie ）添加到在旧版浏览器上支持此功能。我听说你会说但更小的屏幕尺寸在现代设备上，所以不需要polyfill，但我想要我的网站仍然能够运行如果你调整的窗口在IE8，IE9或任何其他浏览器不支持flexbox。

阅读有关flexbox的更多信息http://css-tricks.com/snippets/css/a-guide-to-flexbox/

请参阅使用flexbox的代码模型下面& jsfiddle还 http://jsfiddle.net/4T2Tm/1/

 < ul class =flex-container> 
< li class =flex-item> 1和2< br>和更多< / 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％; 
} 
} 
  

如果您提供答案，请提供jsfiddle自带的。这是相当复杂的东西。

解决方案

你排除了唯一的两种可能的方式来做你想要的对于纯CSS（在这个时间点 - 任何更新的CSS技术将无法在您所需的浏览器）。所以答案是否定的，这是不能做的。

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.

解决方案

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.

这篇关于使可变数量的div与HTML / CSS（响应式设计）并排高度相等？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！