html - HTML/CSS 中具有相同行高的多列

Question

我在一个网站上工作，设计师要求在主页上使用以下格式:

News     Notices  Events
Item 1   Item 1   Item 1
Blurb    Blurb    Blurb
Blurb             Blurb
Blurb

Item 2   Item 2   Item 2
Blurb    Blurb    Blurb
Blurb    Blurb
         Blurb

想法是每个元素都应该具有相同的水平高度。我可以通过以下方式使用 div 轻松地做到这一点:

<div class="row">
  <div>News</div>
  <div>Notices</div>
  <div>Events</div>
</div>
<div class="row">
  <div>Item 1</div>
  <div>Item 1</div>
  <div>Item 1</div>
</div>
<div class="row">
  <div>Item 2</div>
  <div>Item 2</div>
  <div>Item 2</div>
</div>

但是，这不是很好的信息架构 - 特别是当我想为小/窄/移动屏幕堆叠新闻、通知和事件列时。

有没有办法既能得到设计师想要的结果又能保持正确的信息架构？

更新

在使用 jQuery 在页面加载时重新调整网格后，我向设计人员展示了它。一旦他意识到我们几乎无法控制用户在 CMS 中放置的内容，并且网格中的内容将变得不平衡，他就放弃了整个想法。

所以我不需要这个问题的答案，但出于好奇我会保留它。

Answer 1

查看以下内容。应该给你一些想法:

http://spyrestudios.com/css-grid-systems/