Question

我正在使用Flexbox网格css库 - flexboxgrid.com并进行三列布局。在这三列布局中，我将在每列中执行嵌套行。

我想实现嵌套行的高度与所有其他列的高度相等。

这就是我目前所取得的成就：

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>

关于如何实现这一目标的任何解决方案？

Answer 1

@Paulie_D在他的建议中使用CSS grid是正确的。正如您所看到的，我已将换行符添加到第1，第2和第4项，整个第2行调整了它们各自的高度。希望这是你想要的行为：

<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>

{{1}}

Flexbox Grid在列之间具有相等的嵌套行

1 个答案: