使用 HTML/CSS（响应式设计）使可变数量的 div 并排放置在相同的高度上？

Posted 2023-03-06

【中文标题】使用 HTML/CSS（响应式设计）使可变数量的 div 并排放置在相同的高度上？

【英文标题】：make variable number of divs positioned side by side of equal height with HTML/CSS (responsive design)?

【发布时间】：2014-04-10 18:42:10

【问题描述】：

浏览器支持：我需要它才能与 IE8+ 一起使用。接受 CSS3 + polyfill 解决方案，但仅使用 CSS 的解决方案更好。

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

我希望它们的高度等于“行”中的最高 div。

这里的关键是相邻的 div 的数量是不同的（从 4 个逐行到 3 个逐行）。

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

见下面的代码，jsfiddle也有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%;
    

我发现display: table 以及其他display: table-cell 和display: table-row 可能很好，但仅在每行静态div 数的情况下（所以对我的情况不利)，因为您需要添加一个包装 div（作为一行）。但也许我错过了什么？

看 How do I achieve equal height divs (positioned side by side) with html / CSS ? 和 HTML/CSS set div to height of sibling

最后我发现 flexbox 可以满足我的要求。事实上，在玩耍之后，我让它发挥了作用。唯一的问题是旧版浏览器不支持 flexbox（IE10+、chrome 20+、safari 3.1+、firefox 2+ 支持）read more about support http://css-tricks.com/snippets/css/a-guide-to-flexbox#browser-support 所以我可能需要添加 flexie polyfill https://github.com/doctyper/flexie 来支持它在较旧的浏览器上。我听说你会说“但现代设备上的屏幕尺寸较小，因此不需要 polyfill”，但我希望我的网站在 IE8、IE9 或任何其他不支持 flexbox 的浏览器中调整窗口大小时仍然能够运行。

read more about 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 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%;
  

如果您提供答案，请提供随附的 jsfiddle。毕竟这是相当复杂的事情。

【问题讨论】：

你看过Unsemantic吗？

乍一看，既然 display:table 是不可能的，我看不出没有 javascript 是如何实现的。可以这么说，没有父母可以作为身高的基础。不过，javascript 解决方案的实现相当简单。如果您可以将“行”放入每一行的父元素中，另一种方法是使用 table-dsplay 或绝对定位，顶部和底部设置为 0px。

@Ted：正如问题中提到的：你不能使用“行”的概念，因为当屏幕尺寸减小时，你必须将一个项目移动到下一行

在 6 个月后回到这个问题后：flexie.js polyfill 实际上不是一个选项，因为它仅支持 2009 年规范的 flexbox 模型（数量有限properties)，因此使用此 polyfill 不起作用，请参阅问题了解更多详细信息：Is there any polyfill for current CSS Flexible Box Layout Module as per W3C CR***.com/questions/13934654/…

【参考方案1】：

将 min-height 值指定为最高 div 的高度。比如说，所有其他人的第一个 div 的高度......

CSS 仅适用于 IE8+

<!--[if IE 8]>
<style>...</style>
<![endif]-->

【讨论】：

这不是动态的

【参考方案2】：

现在还为时尚早，我还没有尝试在任何地方打破这个解决方案（甚至在 IE 上查看它），但我只是想出了一些到目前为止在我这里拥有的设备和浏览器上工作的东西。

我要包装的div都是class="info"

在我的 CSS 媒体查询中，我有：

    @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; 
    

它必须同时指定最小和最大宽度，否则第 n 个子元素会溢出到其他屏幕尺寸。

【讨论】：

感谢您的建议，您可能忘记提及 CSS .info float: left; 的那部分。我创建了一个 JSbin 来测试您的代码，并且同一行上的 div 的高度与它们的“相邻 div”不同。见http://jsbin.com/woxinaga/1/edit?html,output

【参考方案3】：

您已经排除了使用纯 CSS 完成您所要求的唯一两种可能的方法（此时，任何较新的 CSS 技术都无法在您想要的浏览器中工作）。所以答案是否定的，这是不可能的。

【讨论】：

在我的问题中我说“接受 CSS3 + polyfill 解决方案”，我怀疑除了 flexbox 解决方案之外可能还有其他一些解决方案（这似乎是迄今为止唯一的解决方案），我有兴趣比较它们。

“给我找一个库（polyfill）”对于 SO 来说是题外话。 Flexbox 已经有一个 polyfill，你已经知道了。

我不是要一个 polyfill - 只是一个 CSS3 解决方案，如果使用相关的 polyfill 也可以在旧浏览器上工作

@cimmanon：如果在那之前没有给出答案，我很可能会在几天内接受你的答案