CSS仅用于在响应式网格上设置MULTIPLE“相同高度”行部分的解决方案 [英] CSS only solution to set MULTIPLE “same height” row sections on a responsive grid

问题描述

：仅用于CSS的单一解决方案可以在每行的基础上启用MULTIPLE等高网格部分 >注意：这是一个后续问题

item grid应该是有回应性的，因为它可以显示不同的数字每行基于视口宽度（桌面4，手机2）。在给定的行内，相同的内容和功能部分应该具有相同的高度。 CSS - 项目卡被分成我们需要的行（在两个例子中断点桌面和移动设备上），但是内容段的高度是可变的：

  .items {max-width：1200px;}。item {width：25％;盒子尺寸：边框;显示：内联块; vertical-align：top; padding：0 12px; margin：24px -4px 24px 0;} @ media（max-width：600px）{.item {width：50％; item__heading {background-color：＃d4d0f5;}}填充：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;填充：10px; text-align：center; border：1px solid #bbbbbb;}  

< div class = 项 > < div class =item> < div class =item__heading>第1项< / div> < div class =item__content>一些不那么长的内容< / div> < div class =item__features> < UL> < li>功能1< / li> < / UL> < / DIV> < div class =item__price> £99.99< / div> < / DIV> < div class =item> < div class =item__heading>第2项< / div> < div class =item__content>一些内容比同一行的其他内容更长，并设置此部分的高度，因为它跨越了比该行其他内容部分其余内容部分更多的行< / div> < div class =item__features> < UL> < li>功能1< / li> < / UL> < / DIV> < div class =item__price> £69.99< / div> < / DIV> < div class =item> < div class =item__heading>第3项< / div> < div class =item__content>一些不那么长的内容< / div> < div class =item__features> < UL> < li>功能1< / li> < li>功能2< / li> < li>功能3< / li> < / UL> < / DIV> < div class =item__price> £69.99< / div> < / DIV> < div class =item> < div class =item__heading>第4项< / div> < div class =item__content>一些不那么长的内容< / div> < div class =item__features> < UL> < li>功能1< / li> < / UL> < / DIV> < div class =item__price> £109.99< / div> < / DIV> < div class =item> < div class =item__heading>第5项< / div> < div class =item__content>一些中等长度的内容等等< / div> < div class =item__features> < UL> < li>功能1< / li> < / UL> < / DIV> < div class =item__price> £29.99< / div> < / DIV> < div class =item> < div class =item__heading>第6项< / div> < div class =item__content>一些不那么长的内容< / div> < div class =item__features> < UL> < li>功能1< / li> < li>功能2< / li> < / UL> < / DIV> < div class =item__price> £99.99< / div> < / DIV> < / div>

我创建了以下codepen作为JavaScript基于网络的解决方案，达到了预期的结果 - 但我希望用只是一个CSS解决方案，如果可能的话取代这个： http ：//codepen.io/rusta/pen/xdmdxm

限制

• 要在网格列表中显示的项目数量可以是从1到n之间的任意数字


• 要显示的内容和要素部分的大小将会真的是变数（所以选择一个明智的最小高度是不是一个选项）

基于Flexbox的解决方案似乎是不可能的以应付项目有多个部分需要对齐的事实我希望新的CSS网格系统将有助于实现上述，但我在这方面做了几次尝试，没有运气，所以我打开了社区，看看我是否只是想念ing一些东西

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

根据你自己的答案，你把它们分成4，你也可以用CSS Flexbox来做。

为了让它们在小于4的时候表现出来，可能可以通过使用 nth-child 选择器来实现，但使用 last * 类更简单，所以我去了后者。

有人甚至可以做到这一点，没有 .group_of_4 包装，有一些聪明的 nth-child 规则，但是再次简单一些，因为它没有任何明显的限制

小提琴演示

  .items {display：flex; flex-direction：column; max-width：1200px;}。items .group_of_4 {display：flex; flex-wrap：wrap;证明内容：空间之间; / * updated * /}。items .group_of_4〜.group_of_4 {margin-top：24px;}。items .group_of_4> div {width：calc（25％ -  12px）; / *更新* / box-sizing：border-box; padding：12px;}。item__heading {background-color：＃d4d0f5;填充：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;填充：10px; text-align：center; border：1px solid #bbbbbb; order：4;} / *一个组中的一个项目* /。items .group_of_4 .last1 {margin-right：calc（75％6px）; / *更新* /} / *一个组中的两个项目* /。items .group_of_4 .last2 {margin-right：calc（50％+ 6px）; / *更新* /} / *一个组中的三个项目* /。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;顺序：5; } .items .group_of_4> div：nth-​​child（8）〜.item__content {order：6; } .items .group_of_4> div：n-child（8）〜.item__features {order：7; } .items .group_of_4> div：第n个孩子（8）〜.item__price {order：8; } .items .group_of_4> div {width：calc（50％ -  12px）; / *更新* /} / *一个组中的一个项目* / / *一个组中的三个项目* / .items .group_of_4 .last1，.items .group_of_4 .last3 {margin-right：50％; } / *组中的两个项目* / .items .group_of_4 .last2 {margin-right：0％; }  

 < div class =items> < div class =group_of_4> < div class =item__heading>第1项< / div> < div class =item__content>一些不那么长的内容< / div> < div class =item__features> < UL> < li>功能1< / li> < / UL> < / DIV> < div class =item__price> £99.99< / div> < div class =item__heading>第2项< / div> < div class =item__content>一些内容比同一行的其他内容更长，并设置此部分的高度，因为它跨越了比该行其他内容部分其余内容部分更多的行< / div> < div class =item__features> < UL> < li>功能1< / li> < / UL> < / DIV> < div class =item__price> £69.99< / div> < div class =item__heading>第3项< / div> < div class =item__content>一些不那么长的内容< / div> < div class =item__features> < UL> < li>功能1< / li> < li>功能2< / li> < li>功能3< / li> < / UL> < / DIV> < div class =item__price> £69.99< / div> < div class =item__heading>第4项< / div> < div class =item__content>一些不那么长的内容< / div> < div class =item__features> < UL> < li>功能1< / li> < / UL> < / DIV> < div class =item__price> £109.99< / div> < / DIV> < div class =group_of_4> < div class =item__heading>第5项< / div> < div class =item__content>一些中等长度的内容等等< / div> < div class =item__features> < UL> < li>功能1< / li> < / UL> < / DIV> < div class =item__price> £29.99< / div> < div class =item__heading last2>第6项< / div> < div class =item__content last2>一些不那么长的内容< / div> < div class =item__features last2> < UL> < li>功能1< / li> < / UL> < / DIV> < div class =item__price last2> £99.99< / div> < / div>< / div>  

Wanted: a CSS only solution to enable MULTIPLE equal height grid "sections" on a per row basis, that is also responsive.

Note: this is a follow-up question to this question which has only a single "equal height" section per item - which can be achieved through flexbox

The below diagram should help explain the requirement:

The "item grid" should be responsive - in that it can show a different number of cards per row based on viewport width (4 on desktop, 2 on mobile). Within a given row, the equivalent "content" and "feature" sections should have the same height.

In the below HTML & CSS - the item cards are split into the rows that we need (at the two example break points desktop & mobile) but the content section heights are variable:

.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>

I created the following codepen as a JavaScript based solution that achieves the desired outcome - but I am hoping to replace this with just a CSS solution if possible: http://codepen.io/rusta/pen/xdmdxm

Limitations

• The number of items to be displayed in the grid list can be any number from 1-n
• The size of the "content" and "feature" sections to be displayed will be genuinely variable (so picking a "sensible" min-height is not an option)

Flexbox based solutions seem to be un-able to cope with the fact that the items have more than one section that needs to be aligned

I was hoping that the new CSS Grid system would help achieve the above, but I have made several attempts at this with no luck, so am opening it up the community to see if I am just missing something

Further note: I say a CSS only solution, by which I mean a non-JS solution. If the HTML blocks need to change (order/nesting/class names) to support a non-JS solution that's a viable option

解决方案

Based on your own answer, where you grouped them by 4, you can do that with CSS Flexbox too.

To make them behave when there is less than 4, it might be possible to accomplish that using the nth-child selector, but it was simpler to use a last* class, so I went for the latter.

One might even be able to do this without the .group_of_4 wrapper, with some clever nth-child rules, but again, went for the simpler since it does not come with any obvious limitations

Fiddle demo

.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>

这篇关于CSS仅用于在响应式网格上设置MULTIPLE“相同高度”行部分的解决方案的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！