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与列之间具有相等的嵌套行

回答

相关问题