Flexbox Grid與列之間具有相等的嵌套行

我正在使用Flexbox網格css庫 - flexboxgrid.com並執行三列布局。在這三列布局中，我將在每列中進行嵌套行。Flexbox Grid與列之間具有相等的嵌套行

我想要實現的嵌套行高度也與所有其他列相同。

這是我目前實現：

Current Achievement我想，關於第4與第2節

正好對準我也做了JSFiddle證明什麼，我目前是實現。

HTML：

<div class="row"> 
    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-no-gutter fullWidthBackgroundImageHome"> 
     <div class="box"> 
      <div class="row"> 
       <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"> 
        <div class="box">Section1<br/><br/><br/></div> 
       </div> 
      </div> 
      <br/> 
      <div class="row"> 
       <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"> 
        <div class="box">Section2<br/><br/><br/></div> 
       </div> 
      </div> 
     </div> 
    </div> 

    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-no-gutter fullWidthBackgroundImageHome"> 
    <div class="box"> 
      <div class="row"> 
       <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"> 
        <div class="box">Section3<br/><br/><br/><br/></div> 
       </div> 
      </div> 

      <div class="row"> 
       <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"> 
        <div class="box">Section4<br/><br/><br/></div> 
       </div> 
      </div> 
     </div> 
    </div> 

    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-no-gutter fullWidthBackgroundImageHome"> 
     <div class="box"> 
      <div class="row"> 
       <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"> 
        <div class="box">Section5</div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

就如何實現這一目標的任何解決方案？

來源

2017-09-26 Joe Dorello

選中此https://stackoverflow.com/questions/46398498/css-how-to-have-children-in-different-parents -the-same-height/46406863＃46406863 – LGSon

@LGSon - 所以我不能實現這個使用flexboxgrid CSS庫？ –

你可以，如果你讓他們的兄弟姐妹 – LGSon

@Paulie_D在他的建議中使用CSS grid是正確的。正如你所看到的，我已經將分行線添加到第1，第2和第4項，並且整個第2排改編了它們各自的高度。希望這是你希望的行爲：

body { 
 
    margin: 40px; 
 
} 
 

 
.wrapper { 
 
    display: grid; 
 
    grid-template-columns: 100px 100px 100px; 
 
    grid-gap: 10px; 
 
    background-color: #fff; 
 
    color: #444; 
 
} 
 

 
.box { 
 
    background-color: #444; 
 
    color: #fff; 
 
    border-radius: 5px; 
 
    padding: 20px; 
 
    font-size: 150%; 
 
} 
 

 
.c { 
 
\t \t grid-column-start: 2; 
 
\t \t grid-column-end: 3; 
 
\t \t grid-row-start: 1; 
 
\t \t grid-row-end: 2; 
 
\t } 
 
\t .d { 
 
\t \t grid-column-start: 2; 
 
\t \t grid-column-end: 3; 
 
\t \t grid-row-start: 2; 
 
\t \t grid-row-end: 3; 
 
\t } 
 
\t .f { 
 
\t \t grid-column-start: 3; 
 
\t \t grid-column-end: 4; 
 
\t \t grid-row-start: 2; 
 
\t \t grid-row-end: 3; 
 
\t } 
 
\t .a { 
 
\t \t grid-column-start: 1; 
 
\t \t grid-column-end: 2; 
 
\t \t grid-row-start: 1; 
 
\t \t grid-row-end: 2; 
 
\t } 
 
\t .b { 
 
\t \t grid-column-start: 1; 
 
\t \t grid-column-end: 2; 
 
\t \t grid-row-start: 2; 
 
\t \t grid-row-end: 3; 
 
\t } 
 
\t .e { 
 
\t \t grid-column-start: 3; 
 
\t \t grid-column-end: 4; 
 
\t \t grid-row-start: 1; 
 
\t \t grid-row-end: 2; 
 
\t }

<div class="wrapper"> 
 
    <div class="box a">A<br/><br/><br/></div> 
 
    <div class="box b">B<br/><br/><br/></div> 
 
    <div class="box c">C</div> 
 
    <div class="box d">D<br/><br/><br/><br/><br/></div> 
 
    <div class="box e">E</div> 
 
    <div class="box f">F</div> 
 
</div>

來源

2017-10-01 19:32:26 Kano

Flexbox Grid與列之間具有相等的嵌套行

回答

相關問題