相等高度，彈性和高度的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