相等高度，弹性和高度的Div不能正常工作吗？

Question

我创建一个名为块textCard在WPBakery 。 该块的标记被包裹在默认的Bakery类周围，该类正在像这样标记：

 .textCard { border: 1px solid red; display: flex; height: 100%; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <div class="row justify-content-center"> <div class="container test d-flex"> <div class="col-sm-4"> <div class="vc_column-inner"> <div class="wpb_wrapper"> <div class="textCard"> <div class="textCard__container"> <div class="textCard__content text-left"> <h3>heading</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p> </div> </div> </div> </div> </div> </div> <div class="col-sm-4"> <div class="vc_column-inner"> <div class="wpb_wrapper"> <div class="textCard"> <div class="textCard__container"> <div class="textCard__content text-left"> <h3>This is heading</h3> <p>This is content</p> </div> </div> </div> </div> </div> </div> <div class="col-sm-4"> <div class="vc_column-inner"> <div class="wpb_wrapper"> <div class="textCard"> <div class="textCard__container"> <div class="textCard__content text-left"> <h3>This is header</h3> <p>This is content</p> </div> </div> </div> </div> </div> </div> </div> </div> 

不确定为什么在移除包装后上述CSS起作用：

 .textCard { border: 1px solid red; display: flex; height: 100%; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <div class="row justify-content-center"> <div class="container test d-flex"> <div class="col-sm-4"> <div class="textCard"> <div class="textCard__container"> <div class="textCard__content text-left"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p> </div> </div> </div> </div> <div class="col-sm-4"> <div class="textCard"> <div class="textCard__container"> <div class="textCard__content text-left"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing </p> </div> </div> </div> </div> <div class="col-sm-4"> <div class="textCard"> <div class="textCard__container"> <div class="textCard__content text-left"> <p>Lorem ipsum dolor </p> </div> </div> </div> </div> </div> </div> 

.vc_column-inner和.wpb_wrapper没有分配样式，因此不确定是什么原因导致此结果？

Answer 1

当您将textCard放入包装器中，然后将其强制为100％高度时，它将占用父包装器的100％高度，在这种情况下，其默认属性为height: auto; 所以它崩溃了。

如果高度：自动； 元素将自动调整其高度，以使其内容正确显示。 -W3Schools

当您取出2个包装纸时，它起作用的原因是col-sm-4处于全高状态，因为它具有align-items: stretch;属性align-items: stretch; 默认情况下，其父display: flex; 。

只需添加一条规则，使包装纸的父母高度达到100％，以及textCard解决此问题。

查看CodePen

 .textCard { border: 1px solid red; display: flex; } .vc_column-inner, .wpb_wrapper, .textCard { height: 100%; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <div class="row justify-content-center"> <div class="container test d-flex"> <div class="col-sm-4"> <div class="vc_column-inner"> <div class="wpb_wrapper"> <div class="textCard"> <div class="textCard__container"> <div class="textCard__content text-left"> <h3>heading</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p> </div> </div> </div> </div> </div> </div> <div class="col-sm-4"> <div class="vc_column-inner"> <div class="wpb_wrapper"> <div class="textCard"> <div class="textCard__container"> <div class="textCard__content text-left"> <h3>This is heading</h3> <p>This is content</p> </div> </div> </div> </div> </div> </div> <div class="col-sm-4"> <div class="vc_column-inner"> <div class="wpb_wrapper"> <div class="textCard"> <div class="textCard__container"> <div class="textCard__content text-left"> <h3>This is header</h3> <p>This is content</p> </div> </div> </div> </div> </div> </div> </div> </div> 

Answer 2

这是因为样式嵌套了两个<div>元素，因此样式不再受实际高度的影响。 跟随样式应为class="col-sm-4"子class="col-sm-4"

将样式更改为

.vc_column-inner {
  border: 1px solid red;
  display: flex;
  height: 100%;
}

或将<div class="textCard">到<div class="col-sm-4">

Answer 3

如果我正确理解，如果使用display:flex ，则无需使用bootstrap .col-4类。

您已将项目的高度设置为100％并display:flex ，这意味着它们将适合100％的高度。

但是，如果将.container设置为display:flex并将子级.textCard为flex:1 ，则默认情况下会发生这种情况，它们将全部显示为相等。 子align-items: stretch设置为align-items: stretch由于其flex容器，默认情况下align-items: stretch 。

请在此处查看codepen，希望这就是您的意思！ https://codepen.io/Robhern135/pen/LKaGVL