0

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

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

这是我目前正在实现的目标：

当前成就我希望第 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>

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

4

1 回答 1

0

@Paulie_D 建议为此使用CSS 网格是正确的。如您所见，我已在第 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 {
		grid-column-start: 2;
		grid-column-end: 3;
		grid-row-start: 1;
		grid-row-end: 2;
	}
	.d {
		grid-column-start: 2;
		grid-column-end: 3;
		grid-row-start: 2;
		grid-row-end: 3;
	}
	.f {
		grid-column-start: 3;
		grid-column-end: 4;
		grid-row-start: 2;
		grid-row-end: 3;
	}
	.a {
		grid-column-start: 1;
		grid-column-end: 2;
		grid-row-start: 1;
		grid-row-end: 2;
	}
	.b {
		grid-column-start: 1;
		grid-column-end: 2;
		grid-row-start: 2;
		grid-row-end: 3;
	}
	.e {
		grid-column-start: 3;
		grid-column-end: 4;
		grid-row-start: 1;
		grid-row-end: 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>

于 2017-10-01T19:32:26.107 回答