与CSS并排放置的列中的元素保持相同的高度 [英] Maintain same height in elements inside columns located side by side with CSS

问题描述

我有一个像这样的模板：

<我希望两列中的每一项之间保持相同的高度，这取决于具有最大高度的列，但仅当它们并排时才可以。在较小的屏幕中，当它们的宽度为100％时，每个div都有自己的高度，这取决于其自身的内容高度。

它应该看起来像这样：

我认为我想要的是类似display：table的东西，但我需要两列都可以响应。

我发现的所有问题都是关于在两列中保持相同的高度，但是我已经在使用flexbox来实现这一点。

是否可以仅使用CSS实现我的优势？

编辑：添加了代码段。我忘了提到Chrome 36（Android L WebView）需要它的支持。

这个问题的第一个答案显示了我想要实现的目标，但是 display：subgrid 不受任何支持当前的Chrome版本：
对齐不同块的子元素

  .title {background：＃b6fac0;}。content {background： ＃b6b6fa;}。footer {背景：＃f7f5b5;}。col-50 {边框：1px纯红色；}  

 < link href = http://code.ionicframework.com/1.3.3/css/ionic.min.css rel = stylesheet />< ; ion-content>< div class = row响应-sm> < div class = col-50> < div class = padding title> Veeeeeeeeeeeeeeeeery veeeeeeeeeery veeeeeeeeeeeeeeeeery veeeeeeeeeery veeeeeeeeeeeeeeeeery veeeeeeeeeeeery veeeeeeeeeeeeeeee veeeeeeeeeeeery loooooooooooong标题< / div> < div class =填充内容> Lorem ipsum dolor坐下，一直保持着安静的状态。 Pellentesque rhoncus neque vitare lorem varius placerat。 Donec blandit mi non mauris ornare faucibus。 Tortor dapibus等人中的Quisque mollis nunc或cus pharetra。 < div class = padding footer>页脚< / div> < / div> < div class = col-50> < div class = padding title>标题< / div> < div class =填充内容> Lorem ipsum dolor坐下，一直保持着安静的状态。 Pellentesque rhoncus neque vitare lorem varius placerat。 Donec blandit mi non mauris ornare faucibus。 Tors dapibus等中的Quisque mollis nunc等。菜豆tortortortor，在dapibus sed中的luctus，溃疡得到lorem。 Morbi vehicula fermentum arcu，neg egestas augue。 Fusce orci ex，sodales uttellus amet，pretium pulvinar dioo。悬浮能力。菜豆（Conphasellus convallis metus sed earte rhoncus，eu tristique lacus fermentum）。 < / div> < div class = padding footer>页脚< / div> < / div>< / div>< / ion-content>  

解决方案

您可以查看 @supports 过滤可能的display：option或 subgrid 。

示例，其中 display：contents

  .title {
背景：＃b6fac0; 
} 
 
 .content {
背景：＃b6b6fa; 
} 
 
 .footer {
背景：＃f7f5b5; 
} 
 
 .col-50 {
边框：1像素纯红色； 
} 
 
 @supports（显示：内容）{
 .row.sensitive-sm {
 display：grid; 
 grid-template-columns：repeat（2，1fr）; 
 grid-column-gap：1em; 
} 
 .col-50 {
显示：content 
} 
 .title {
网格行：1 
} 
 .content {
 grid-row：2; 
} 
 @media屏幕，并且（max-width：500px）{
 / *将断点设置为正确的值* / 
 .row.sensitive-sm，
 .col-50 {
 display：block; 
} 
} 
}  

 < link href = http://code.ionicframework.com/1.3.3/css/ionic.min.css rel = stylesheet /> 
< ion-content> 
< div class = row sensitive-sm> 
< div class = col-50> 
< div class = padding title> 
 Veeeeeeeeeeeeeeeeery veeeeeeeeeeeery veeeeeeeeeeeeeeeeery veeeeeeeeeeryery veeeeeeeeeeeeeeeeery veeeeeeeeeery veeeeeeeeeeeeeeee veeeeeeeeeeeeeery loooooooooooong标题< / div> 
< div class = padding content> 
 Lorem ipsum dolor坐在amet处，私下奉献精英。 Pellentesque rhoncus neque vitare lorem varius placerat。 Donec blandit mi non mauris ornare faucibus。 Tortor dapibus等人中的Quisque mollis nunc，或其他相象
< / div> 
< div class = padding footer> 
 Footer a 
< / div> 
< / div> 
< div class = col-50> 
< div class = padding title> 
标题< / div> 
< div class = padding content> 
 Lorem ipsum dolor坐在amet处，私下奉献精英。 Pellentesque rhoncus neque vitare lorem varius placerat。 Donec blandit mi non mauris ornare faucibus。 Tors dapibus等中的Quisque mollis nunc等。 Phasellus tortor tortor，在dapibus sed中的luctus 
，ultices eget lorem。 Morbi vehicula fermentum arcu，neg egestas augue。 Fusce orci ex，sodales uttellus amet，pretium pulvinar dioo。悬浮能力。菜豆（Conphasellus convallis metus sed earte rhoncus，eu tristique lacus fermentum）。 
< / div> 
< div class = padding footer> 
页脚
< / div> 
< / div> 
< / div> 
 
< / ion-content>  

对于快速检查对属性的支持： https://caniuse.com/

I have a template like this:

I want to maintain the same height between each item of both columns, depending on the one that has the biggest height, but only when they are side by side. In smaller screens, when they have width: 100%, each div has its own height depending of its own content height.

It should look like this:

I think that what I want is something like display: table, but I need both columns to be responsive.

All the questions I´have found are about maintaining the same height in both columns, but I´m already using flexbox to achieve this.

Is it possible to achieve what I vant with css only?

EDIT: Added code snippet. I forgot to mention that it needs to be supported by Chrome 36 (Android L WebView).

This question´s first answer shows what I wanted to achieve, but display:subgrid is not supported by any version Chrome at present: Align child elements of different blocks

.title {
  background: #b6fac0;
}

.content {
  background: #b6b6fa;
}

.footer {
  background: #f7f5b5;
}

.col-50 {
  border: 1px solid red;
}

<link href="http://code.ionicframework.com/1.3.3/css/ionic.min.css" rel="stylesheet" />
<ion-content>
<div class="row responsive-sm">
  <div class="col-50">
    <div class="padding title">
      Veeeeeeeeeeeeeeery veeeeeeeeeery veeeeeeeeeeeeeeery veeeeeeeeeery veeeeeeeeeeeeeeery veeeeeeeeeery veeeeeeeeeeeeeeery veeeeeeeeeery loooooooooooong title </div>
    <div class="padding content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rhoncus neque vitae lorem varius placerat. Donec blandit mi non mauris ornare faucibus. Quisque mollis nunc in tortor dapibus, et ornare lacus pharetra
    </div>
    <div class="padding footer">
      Footer
    </div>
  </div>
  <div class="col-50">
    <div class="padding title">
      Title </div>
    <div class="padding content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rhoncus neque vitae lorem varius placerat. Donec blandit mi non mauris ornare faucibus. Quisque mollis nunc in tortor dapibus, et ornare lacus pharetra. Phasellus tortor tortor, luctus
      in dapibus sed, ultrices eget lorem. Morbi vehicula fermentum arcu, nec egestas augue. Fusce orci ex, sodales ut tellus sit amet, pretium pulvinar odio. Suspendisse potenti. Phasellus convallis metus sed erat rhoncus, eu tristique lacus fermentum.
    </div>
    <div class="padding footer">
      Footer
    </div>
  </div>
</div>
</ion-content>

解决方案

you may take a look at @supports to filter possible display:option or subgrid .

example with display:contents

.title {
  background: #b6fac0;
}

.content {
  background: #b6b6fa;
}

.footer {
  background: #f7f5b5;
}

.col-50 {
  border: 1px solid red;
}

@supports (display: contents) {
  .row.responsive-sm {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 1em;
  }
  .col-50 {
    display: contents
  }
  .title {
    grid-row: 1
  }
  .content {
    grid-row: 2;
  }
  @media screen and (max-width:500px) {
    /* set the break point to the right value */
    .row.responsive-sm,
    .col-50 {
      display: block;
    }
  }
}

<link href="http://code.ionicframework.com/1.3.3/css/ionic.min.css" rel="stylesheet" />
<ion-content>
  <div class="row responsive-sm">
    <div class="col-50">
      <div class="padding title">
        Veeeeeeeeeeeeeeery veeeeeeeeeery veeeeeeeeeeeeeeery veeeeeeeeeery veeeeeeeeeeeeeeery veeeeeeeeeery veeeeeeeeeeeeeeery veeeeeeeeeery loooooooooooong title </div>
      <div class="padding content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rhoncus neque vitae lorem varius placerat. Donec blandit mi non mauris ornare faucibus. Quisque mollis nunc in tortor dapibus, et ornare lacus pharetra
      </div>
      <div class="padding footer">
        Footer a
      </div>
    </div>
    <div class="col-50">
      <div class="padding title">
        Title </div>
      <div class="padding content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rhoncus neque vitae lorem varius placerat. Donec blandit mi non mauris ornare faucibus. Quisque mollis nunc in tortor dapibus, et ornare lacus pharetra. Phasellus tortor tortor, luctus
        in dapibus sed, ultrices eget lorem. Morbi vehicula fermentum arcu, nec egestas augue. Fusce orci ex, sodales ut tellus sit amet, pretium pulvinar odio. Suspendisse potenti. Phasellus convallis metus sed erat rhoncus, eu tristique lacus fermentum.
      </div>
      <div class="padding footer">
        Footer
      </div>
    </div>
  </div>

</ion-content>

usefull for a fast check on supports on properties: https://caniuse.com/

这篇关于与CSS并排放置的列中的元素保持相同的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！