程序员经验分享-hwhale

在响应式网格上设置“相同高度”行部分的 CSS 唯一解决方案

2023-11-27

Wanted：仅 CSS 的解决方案，可在每行基础上启用等高网格“部分”，而且也是响应式的。

该图有望比本文中的文字更好地解释该要求：

helpful diagram

“项目网格”应该是响应式的 - 因为它可以根据视口宽度显示每行不同数量的卡片。在给定的行内，等效部分应在“每行”基础上具有相同的高度。

在下面的 HTML 和 CSS 中 - 项目卡被分成我们需要的行（在桌面和移动设备的两个示例断点处），但内容部分的高度是可变的（恶心）：

.items {
  max-width: 1200px;
}

.item {
  width: 25%;
  box-sizing: border-box;
  display: inline-block;
  vertical-align: top;
  padding: 0 12px;
  margin: 24px -4px 24px 0;
}

@media (max-width: 600px) {
  .item {
    width: 50%;
  }
}

.item__heading {
  background-color: #d4d0f5;
  padding: 10px;
  text-align: center;
  border: 1px solid #bbbbbb;
}

.item__content {
  padding: 10px;
  border-left: 1px solid #bbbbbb;
  border-right: 1px solid #bbbbbb;
}

.item__price {
  background-color: #e0f6d9;
  padding: 10px;
  text-align: center;
  border: 1px solid #bbbbbb;
}
<div class="items">

  <div class="item">
    <div class="item__heading">
      Item 1
    </div>
    <div class="item__content">
      Some content that is not that long
    </div>
    <div class="item__price">
      £99.99
    </div>
  </div>


  <div class="item">
    <div class="item__heading">
      Item 2
    </div>
    <div class="item__content">
      Some content that is longer than other items on the same row and sets the height of this section
    </div>
    <div class="item__price">
      £69.99
    </div>
  </div>

  <div class="item">
    <div class="item__heading">
      Item 3
    </div>
    <div class="item__content">
      Some content that is not that long
    </div>
    <div class="item__price">
      £69.99
    </div>
  </div>

  <div class="item">
    <div class="item__heading">
      Item 4
    </div>
    <div class="item__content">
      Some content that is not that long
    </div>
    <div class="item__price">
      £109.99
    </div>
  </div>

  <div class="item">
    <div class="item__heading">
      Item 5
    </div>
    <div class="item__content">
      Some content that is a medium kind of length blah blah
    </div>
    <div class="item__price">
      £29.99
    </div>
  </div>

  <div class="item">
    <div class="item__heading">
      Item 6
    </div>
    <div class="item__content">
      Some content that is not that long
    </div>
    <div class="item__price">
      £99.99
    </div>
  </div>

    
</div>

以下 codepen 是一个基于 JavaScript 的解决方案，可以实现预期的结果 - 但这是我试图避免的：https://codepen.io/rusta/pen/KmbVKd

局限性

  • 网格列表中显示的项目数可以是 1-150 之间的任意数字
  • 要显示的项目内容的大小确实是可变的（因此选择“合理的”最小高度不是一个选项）

我希望新的 CSS 网格系统能够帮助我实现上述目标，但使用了一段时间后，它似乎需要比我希望的更多的结构，并且响应方面似乎相当具有挑战性。但也许某个地方有一个基于 CSS 网格的答案

进一步说明：我说的是纯 CSS 解决方案，我指的是非 JS 解决方案。如果 HTML 块需要更改（顺序/嵌套/类名称）以支持非 JS 解决方案，那绝对没问题

在这个简单的例子中 - 我们只关注“内容”部分以获得“匹配高度” - 因为我们可以假设标题和价格部分自然具有相同的高度。最好在任何匹配的网格部分（标题/内容/价格/其他）中启用“等效性”，但这可能是另一天的事情......


通过给予.items display: flex; flex-wrap: wrap; your item将成为弹性项目并从左向右流动并在没有更多空间时换行。

然后你给.item display: flex; flex-direction: column;，这也将使它们成为一个弹性容器，并且通过使用列方向，它的子元素将像块元素一样垂直流动。

最后你给出.item__content flex: 1;，这将使它占据垂直方向上的任何剩余空间，因此每一行的item将具有相同的高度。

更新了代码笔

堆栈片段

.items {
  display: flex;
  flex-wrap: wrap;
  max-width: 1200px;
}

.item {
  display: flex;
  flex-direction: column;
  width: 25%;
  box-sizing: border-box;
  vertical-align: top;
  padding: 0 12px;
  margin: 24px -4px 24px 0;
}

@media (max-width: 600px) {
  .item {
    width: 50%;
  }
}

.item__heading {
  background-color: #d4d0f5;
  padding: 10px;
  text-align: center;
  border: 1px solid #bbbbbb;
}

.item__content {
  flex: 1 1 auto;                   /* IE need 1 1 auto */
  padding: 10px;
  border-left: 1px solid #bbbbbb;
  border-right: 1px solid #bbbbbb;
}

.item__price {
  background-color: #e0f6d9;
  padding: 10px;
  text-align: center;
  border: 1px solid #bbbbbb;
}
<div class="items">

  <div class="item">
    <div class="item__heading">
      Item 1
    </div>
    <div class="item__content">
      Some content that is not that long
    </div>
    <div class="item__price">
      £99.99
    </div>
  </div>

  <div class="item">
    <div class="item__heading">
      Item 2
    </div>
    <div class="item__content">
      Some content that is longer than other items on the same row and sets the height of this section
    </div>
    <div class="item__price">
      £69.99
    </div>
  </div>

  <div class="item">
    <div class="item__heading">
      Item 3
    </div>
    <div class="item__content">
      Some content that is not that long
    </div>
    <div class="item__price">
      £69.99
    </div>
  </div>

  <div class="item">
    <div class="item__heading">
      Item 4
    </div>
    <div class="item__content">
      Some content that is not that long
    </div>
    <div class="item__price">
      £109.99
    </div>
  </div>

  <div class="item">
    <div class="item__heading">
      Item 5
    </div>
    <div class="item__content">
      Some content that is a medium kind of length blah blah
    </div>
    <div class="item__price">
      £29.99
    </div>
  </div>

  <div class="item">
    <div class="item__heading">
      Item 6
    </div>
    <div class="item__content">
      Some content that is not that long
    </div>
    <div class="item__price">
      £99.99
    </div>
  </div>

</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

css

flexbox

cssgrid

在响应式网格上设置“相同高度”行部分的 CSS 唯一解决方案 的相关文章

  • 如何使用javascript检查图像url是否为404

    使用案例 当 src 不为空并且 alt 标签不为空时 则显示 src 的图像 然后检查 src 图片 url 不是 404 当 src 为空且 alt 不为空时 显示名字的图像 当 src 和 alt 为空时显示默认图像 HTML img

  • 根据窗口大小调整 div 及其内部内容的大小

    我已经查找了一百万种技术 但我无法让它发挥作用 我知道还有其他类似的帖子 如果它给任何人带来麻烦 我很抱歉 但我需要针对我的代码的具体说明 因为我很愚蠢 提前非常感谢 我希望 div 容器 contentContactBox 以及其中的所有

  • 使用特定 HTTP 方法链接到页面 (DELETE)

    如何像 Rails 那样链接到页面并让浏览器使用 DELETE 方法调用它 我试过 a href DELETE ME a 但不起作用 我使用 Node js 所以我可以用它来处理 DELETE 方法 你不能 链接只会触发 GET 请求 您可

  • Jquery 动画背景图像过渡

    我有一个导航栏 当将鼠标悬停在某个项目上时 背景图像会发生变化 效果很好 但是 我希望该图像从顶部滑入 并在您停止悬停时向上滑回 我一直在尝试使用 JQuery 使用 css bacgroundImage 和滑动或切换来做到这一点 但这些似

  • onMouseEnter 和 onMouseLeave 未按预期运行

    我正在尝试为我的组件模拟悬停效果 然而 onMouseEnter Leave 事件没有按预期工作 现在我试图让它简单地 console log 一个字符串来检查它是否正常工作 但什么也没有发生 目的是我可以在悬停时更改其背景颜色 我尝试通过

  • 使用 jQuery / JavaScript 将 Alpha 通道添加到背景颜色

    我有一个 jQuery 函数 它添加了一个Alpha通道到一个背景颜色当事件发生时 这是我的jsFiddle http jsfiddle net liormb SxQt8 1 CSS div background color rgb 100

  • 如何在 iPad 上使用 HTML5/Javascript 合成音频

    有没有人有工作示例代码 可以在 iPad 上的 Mobile Safari 上使用 HTML5 Javascript 合成 并播放 音频 我在网上找到了一些基于 javascript 的声音合成示例 但它们似乎都只能在 Firefox 中使

  • 如何在 CSS 中降低图像亮度

    我想降低 CSS 中的图像亮度 我搜索了很多 但我所得到的只是如何改变不透明度 但这使图像更加明亮 谁能帮我 您正在寻找的功能是filter 它能够实现一系列图像效果 包括亮度 myimage filter brightness 50 您可

  • 滚动效果：先慢后快

    我正在尝试创建滚动效果 当onclick事件被触发 我想要那个div1滚动到dev2 一开始应该慢 然后快 这是一个使用此效果的网站 http community saucony com kinvara3 http community sa

  • 有条件地在 html.RadioButtonFor (MVC4/Razor) 中包含选中的属性

    当您在手动编码的 html 元素 例如单选按钮 中显式包含 checked 属性时 您可以使用 bool 来确定该属性是否存在于该元素上正如这里所看到的 http www davidhayden me blog conditional at

  • 始终滚动 div 元素而不是页面本身

    我有一个带有内部的页面布局 div 包含页面上重要内容的元素 设计的重要部分是 content height 300px width 500px overflow scroll 现在 当包含的文本大于 300px 时 我需要能够滚动它 是否

  • AngularJS：ng-show 与 display:none

    我有一个用例 我必须使用 CSS 默认隐藏 HTML 元素 如下所示 HTML div class item div CSS item display none 但是 我需要在页面加载后使用 ng show 切换元素的可见性 如下所示 di

  • 如何编辑 QProgressBar 的样式表

    我无法在我的应用程序中编辑进度条的颜色 仅编辑文本颜色 pyhton 3 9 PySide6 QT Creator 7 0 2 Python应用程序 https i stack imgur com 6hKFI png import sys

  • 向上/向下滚动到带有固定按钮的部分

    我想构建一个用于向上 向下滚动到页面部分标签的脚本 我的源代码如下所示 HTML div class move div class previous UP div div class next DOWN div div section Fi

  • 如何修复连接的可排序对象位置错误的可拖动助手（部分由浮动/相对定位的父元素引起）？

    Preface 我遇到一个问题 当使用放置在浮动 相对定位的父元素中的可拖动元素 可排序元素时 可拖动帮助器偏移不正确 浮动父元素是 Bootstrap 列 其中多个可排序列表放置在一列中 可拖动列表放置在另一列中 Example 这是一个

  • Python：Scrapy返回元素后面的所有html，而不仅仅是元素的html

    我遇到了 Scrapy 行为异常的问题 几个月前我编写了一个简单的函数 它返回给定 xpath 处的项目列表 def get html response path sel Selector text response page source

  • 我应该采取什么圆角方法？

    因此 关于圆角的信息并不缺乏 我已经经历过其中的大部分 我发帖是为了征求社区对这一点的意见 我的场景是 我们正在开发一个圆角相关设计 主要用于交互

  • 可以在 IE 中的表格行上添加渐变吗？

    当我将鼠标悬停在表格特定部分的表格行上时 我希望背景更改为线性渐变 CSS 很简单 tbody row links tr hover background typical multi browser linear gradient code

  • 与 body 相比，将 css 规则应用于 html 有什么区别？

    我看不出以下之间的区别 html background f1f1f1 and body background f1f1f1 有什么解释吗 没有真正的区别 如果你只是谈论在哪里申请background 否则BoltClock 对另一个问题的回

  • 如何防止 Safari 滚动溢出：隐藏的 iframe？

    使用 Safari 您可以通过设置 style overflow hide 来禁用大多数 iframe 滚动 在 iframe 上 但是 如果您单击 iframe 并移动鼠标 内容无论如何都会滚动 Example 滚动内容 html

随机推荐

热门标签