程序员经验分享-hwhale

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

2024-04-28

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

注意：这是一个后续问题这个问题 https://stackoverflow.com/questions/44115503/css-only-solution-to-set-same-height-row-sections-on-a-responsive-grid每个项目只有一个“等高”部分 - 这可以通过 flexbox 实现

The below diagram should help explain the requirement: Helpful Diagram

“项目网格”应该是响应式的 - 因为它可以根据视口宽度每行显示不同数量的卡片（桌面上 4 个，移动设备上 2 个）。在给定行中，等效的“内容”和“功能”部分应具有相同的高度。

在下面的 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__features {
  padding: 10px;
  border-top: 1px solid #bbbbbb;
  border-left: 1px solid #bbbbbb;
  border-right: 1px solid #bbbbbb;
  background-color: #f7cbb1;
}

.item__features ul {
  margin: 0px;
}

.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__features">
      <ul>
        <li>feature 1</li>
      </ul>
    </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 as it spans many more lines than the rest of the other content sections on this row
    </div>
    <div class="item__features">
      <ul>
        <li>feature 1</li>
      </ul>
    </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__features">
      <ul>
        <li>feature 1</li>                         <li>feature 2</li>
        <li>feature 3</li>
      </ul>
    </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__features">
      <ul>
        <li>feature 1</li>
      </ul>
    </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__features">
      <ul>
        <li>feature 1</li>
      </ul>
    </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__features">
      <ul>
        <li>feature 1</li>
        <li>feature 2</li>
      </ul>
    </div>
    <div class="item__price">
      £99.99
    </div>
  </div>

    
</div>

我创建了以下 codepen 作为基于 JavaScript 的解决方案，可以实现预期的结果 - 但如果可能的话，我希望仅用 CSS 解决方案替换它：http://codepen.io/rusta/pen/xdmdxm http://codepen.io/rusta/pen/xdmdxm

局限性

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

基于 Flexbox 的解决方案似乎无法应对以下事实：项目有多个需要对齐的部分

我希望新的 CSS 网格系统能够帮助实现上述目标，但我已经对此进行了多次尝试，但没有成功，所以我将其开放给社区，看看我是否遗漏了一些东西

进一步说明：我说的是纯 CSS 解决方案，我指的是非 JS 解决方案。如果 HTML 块需要更改（顺序/嵌套/类名称）以支持非 JS 解决方案，这是一个可行的选择


根据你自己的答案，你将它们按 4 分组，你也可以使用 CSS Flexbox 来做到这一点。

为了让它们在少于 4 个时表现出来，可以使用nth-child选择器，但使用更简单last*类，所以我选择了后者。

人们甚至可以在没有.group_of_4包装，有一些巧妙的nth-child规则，但同样，选择更简单的规则，因为它没有任何明显的限制

小提琴演示 https://jsfiddle.net/83nz0jeh/2/

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

.items .group_of_4 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;        /*  updated  */
}

.items .group_of_4 ~ .group_of_4 {
  margin-top: 24px;
}

.items .group_of_4 > div {
  width: calc(25% - 12px);                /*  updated  */
  box-sizing: border-box;
  padding: 12px;
}


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

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

.item__features {
  padding: 10px;
  border-left: 1px solid #bbbbbb;
  border-right: 1px solid #bbbbbb;
  background-color: #f7cbb1;
  order: 3;
}

.item__price {
  background-color: #e0f6d9;
  padding: 10px;
  text-align: center;
  border: 1px solid #bbbbbb;
  order: 4;
}

/* one item in a group */
.items .group_of_4 .last1 {
    margin-right: calc(75%  6px);        /*  updated  */
}
/* two items in a group */
.items .group_of_4 .last2 {
    margin-right: calc(50% + 6px);       /*  updated  */
}
/* three items in a group */
.items .group_of_4 .last3 {
    margin-right: calc(25% + 6px);       /*  updated  */
}

@media (max-width: 600px) {
  .items .group_of_4 > div:nth-child(8) ~ .item__heading {
    margin-top: 24px;
    order: 5;
  }
  .items .group_of_4 > div:nth-child(8) ~ .item__content {
    order: 6;
  }
  .items .group_of_4 > div:nth-child(8) ~ .item__features {
    order: 7;
  }
  .items .group_of_4 > div:nth-child(8) ~ .item__price {
    order: 8;
  }
  
  .items .group_of_4 > div {
    width: calc(50% - 12px);             /*  updated  */
  }

  /* one item in a group */
  /* three items in a group */
  .items .group_of_4 .last1,
  .items .group_of_4 .last3 {
    margin-right: 50%;
  }
  /* two items in a group */
  .items .group_of_4 .last2 {
    margin-right: 0%;
  }  
}
<div class="items">

  <div class="group_of_4">
    <div class="item__heading">
      Item 1
    </div>
    <div class="item__content">
      Some content that is not that long
    </div>
    <div class="item__features">
      <ul>
        <li>feature 1</li>
      </ul>
    </div>
    <div class="item__price">
      £99.99
    </div>

    <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 as it spans many more lines than the rest of the other content sections on this row
    </div>
    <div class="item__features">
      <ul>
        <li>feature 1</li>
      </ul>
    </div>
    <div class="item__price">
      £69.99
    </div>

    <div class="item__heading">
      Item 3
    </div>
    <div class="item__content">
      Some content that is not that long
    </div>
    <div class="item__features">
      <ul>
        <li>feature 1</li>
        <li>feature 2</li>
        <li>feature 3</li>
      </ul>
    </div>
    <div class="item__price">
      £69.99
    </div>

    <div class="item__heading">
      Item 4
    </div>
    <div class="item__content">
      Some content that is not that long
    </div>
    <div class="item__features">
      <ul>
        <li>feature 1</li>
      </ul>
    </div>
    <div class="item__price">
      £109.99
    </div>
  </div>
  
  
  <div class="group_of_4">
    <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__features">
      <ul>
        <li>feature 1</li>
      </ul>
    </div>
    <div class="item__price">
      £29.99
    </div>

    <div class="item__heading last2">
      Item 6
    </div>
    <div class="item__content last2">
      Some content that is not that long
    </div>
    <div class="item__features last2">
      <ul>
        <li>feature 1</li>
      </ul>
    </div>
    <div class="item__price last2">
      £99.99
    </div> 

  </div>
</div>

这是一个基于脚本的解决方案，适合任何需要的人。

它缺少的是一个调整大小事件处理程序，它会重新计算每行的最大高度。

(function(d) {
  window.addEventListener("load", function() {
    var item = d.querySelector('.items');
    var items = item.querySelectorAll('.item__features');
    var heights = [], i = 0, css;
    for (i = 0; i < items.length; i++) {
      heights.push(parseFloat(window.getComputedStyle(items[i], null).getPropertyValue("height")));
    }
    css = ".item__features { height: " + Math.max.apply(null, heights) + "px; }" ;
    var st = d.createElement('style');
    st.type = 'text/css';
    if (st.styleSheet) {
      st.styleSheet.cssText = css
    } else {
      st.appendChild(d.createTextNode(css));
    }
    (d.head || d.getElementsByTagName('head')[0]).appendChild(st);
  }, false);
}(document));
.items {
  display: flex;
  flex-wrap: wrap;
  max-width: 1200px;
}

.item {
  display: flex;
  flex-direction: column;
  width: 25%;
  box-sizing: border-box;
  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;
  padding: 10px;
  border-left: 1px solid #bbbbbb;
  border-right: 1px solid #bbbbbb;
}

.item__features {
  padding: 10px;
  border-top: 1px solid #bbbbbb;
  border-left: 1px solid #bbbbbb;
  border-right: 1px solid #bbbbbb;
  background-color: #f7cbb1;
}

.item__features ul {
  margin: 0px;
}

.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__features">
      <ul>
        <li>feature 1</li>
      </ul>
    </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 as it spans many more lines than the rest of the other content sections on this row
    </div>
    <div class="item__features">
      <ul>
        <li>feature 1</li>
      </ul>
    </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__features">
      <ul>
        <li>feature 1</li>
        <li>feature 2</li>
        <li>feature 3</li>
      </ul>
    </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__features">
      <ul>
        <li>feature 1</li>
      </ul>
    </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__features">
      <ul>
        <li>feature 1</li>
      </ul>
    </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__features">
      <ul>
        <li>feature 1</li>
        <li>feature 2</li>
      </ul>
    </div>
    <div class="item__price">
      £99.99
    </div>
  </div>

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

html

css

flexbox

cssgrid

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

  • 有效，但未捕获引用错误：当我在控制台中键入数组时未定义数组

    我用 js 制作了一个 Tic Tac Toe 游戏 我有几个数组 一个用于 html td 元素 网格 用于查看它们之前是否被点击过 boolGrid 还有一个用颜色检查结束条件 colorgrid 我使用 var 关键字及其内容在全局范

  • 拒绝在框架中显示“https://www.youtube.com/watch?v=oKZRsBjQJOs”，因为它将“X-Frame-Options”设置为“sameorigin”

    我需要将来自 youtube 的视频放置在我的网站中 但 URL 是一个变量 我创建了一个可以放置的管道 但不起作用 这是我在 HTML 文件中的代码 我的管道的代码是这样的 export class VideoPipe implement

  • Javascript 可折叠面板默认打开

    我正在关注这个代码示例在这里找到 https www w3schools com howto howto js collapsible asp使用 css html javascript 创建可折叠面板 function toggleCol

  • 上传时自动缩小 CSS 和 Javascript

    有谁知道通过上传处理 脚本自动运行某些文件类型的好方法 当我将 CSS 和 Javascript 上传到服务器时 我试图自动缩小它们 在本地保留一个漂亮的 人类可读的版本 同时在服务器上保留一个缩小的版本 我目前在 Windows 上使用

  • onclick 调用 hide-div 函数不起作用

    我一直在与这段简单的代码作斗争 我正在尝试使用

  • 比较 PHP 中的 unix 时间戳 [关闭]

    很难说出这里问的是什么 这个问题是含糊的 模糊的 不完整的 过于宽泛的或修辞性的 无法以目前的形式得到合理的回答 如需帮助澄清此问题以便重新打开 访问帮助中心 help reopen questions 在 PHP 中我有 diff abs

  • CSS - 制作“步进”文本的好方法？

    有没有一种好的方法可以实现以下目标 而无需任何额外的标记 不过使用 JavaScript 就很好了 任何想法 Thanks Edit 我的标记将是这样的 div style width 400px p Text text text Text

  • 使用 PHP 简单 HTML DOM 将隐藏的输入标记值作为字符串获取

    我试图获取输入类型隐藏标记值 CAS AH 11 等 以及名称属性 但在运行基于 PHP 的解析器时我得到的只是一个空白页 有人知道出了什么问题吗 我已经查过了将隐藏输入作为字符串抓取 使用 PHP 简单 HTML DOM 解析器 http

  • HTML：您可以隐藏/忽略浏览器查找中的文本元素 (CTRL+F)

    我有一个具有相当复杂的 UI 的 Web 应用程序 并且屏幕的一部分保留用于内容 如果可能的话 我想这样做 以便当用户使用浏览器的内置文本搜索 CTRL F 时 UI 中的任何文本都将被忽略 并且仅搜索实际内容 这可行吗 CSS 和 Jav

  • 无法读取未定义错误的属性“匹配”

    我试图在 React JS 前端显示一些文本来代替个人资料图像 当它不可用时 基本上 我将当前客户名称传递给一个函数 该函数提取名称中所有单词的第一个字符 我能够仅显示名称 但是当我执行函数调用时 出现 无法读取未定义的属性 匹配 错误 并

  • 如何在 Jekyll 博客中包含视频标签/mp4 视频

    I am not寻找一种方法链接到 YouTube https stackoverflow com questions 10529859 how to include video in jekyll markdown blog 122738

  • 带有 viewbags 的 MVC 数据集

    如何将数据集放入视图袋中并在视图中显示结果 我有一个来自模型的数据集 并将其写入视图包 我想使用 foreach 循环从视图中的视图包中获取数据行 我已经有一个变量进入视图 所以我无法正常传递数据集 每页我还会有许多其他数据集 所以我认为

  • 修复 PHP 中格式错误的 HTML？

    我正在根据用户提供的片段构建一个大型 HTML 文档 这些用户有以各种方式格式错误的烦人习惯 浏览器足够强大且宽容 但我希望能够验证并 理想情况下 修复任何格式错误的 HTML 如果可能的话 例如 td b Title b td 可以合理地

  • 如何用方向键移动div

    我想使用 jQuery 用箭头键移动 div 所以右 左 下 上 找到了我想要完成的演示here http atomicrobotdesign com blog htmlcss move objects around the canvas

  • 选择 jQuery 中的每第 n 个项目？

    jQuery 有方便的 even 和 odd 选择器 用于选择集合中偶数或奇数索引的项目 我用它来清除一系列浮动框中的所有其他项目 如下所示 div class 2up div div div div div div div and Cle

  • 飞碟中的外部 CSS

    我想知道如何在 Flying Saucer 中包含外部 CSS 在此之前THB我检查了所有可用的链接StackOverflow但它们没有帮助 这就是为什么我自己做这个的原因 TestCSS xhtml重命名版本TestCSS html 所以

  • CSS 3.0 用户选择属性替换

    我正在使用 CSS 3 0 它抱怨 用户选择 属性不存在 有谁知道合适的替代品或替代品是什么 user select is 回到规范 https drafts csswg org css ui 4 propdef user selectCS

  • 如何在 Firefox 和 IE 中获得 user-modify:read-write-plaintext-only 行为

    Chrome Safari 支持 CSS webkit user modify read write plaintext only 它可以禁止用户将富文本粘贴到 contenteditable div 中 我不知道如何在 Firefox 和

  • 如何将 Bootstrap 3 轮播标题移动到图像下方？

    我有这个 html 使用 bootstrap 3 显示幻灯片图像 div class col sm 8 div class carousel slide ol class carousel indicators li class activ

  • IE9支持CSS线性渐变吗？

    有了 Chrome Safari 和 Firefox webkit gradient and moz linear gradient特性 我怎样才能用 IE9 做同样的事情呢 最好的跨浏览器解决方案是 background fff back

随机推荐

热门标签