Question

基本上，我经常遇到这种问题，我的网格列没有按预期对齐。（Bootstrap，Materializecss和其他人）每次出现同样的问题时，有时我会将其修复，有时我会努力工作几个小时。

这真的很不错，我真的不知道为什么会出现这个问题，以及如何在未来的项目中解决这个问题！

问题如下：

我有一个布局示例（jsfiddle），我希望这样做。它使用Materializecss和某些部分。

  Large View (with thumbnails right)           Mobile View
+----------------------+-------------+       +----------------------+
| Section 1            | Section 2   |       | Section 1            | 
|                      |             |       |                      |
+----------------------+-------------+       +----------------------+
| Image Slider Section | Thumbnails  |       | Section 2            |
|                      | # # # # # # |       |                      |
|                      | # # # # # # |       +----------------------+
|                      | # # # # # # |       | Image Slider Section |
+----------------------+-------------+       |                      |
| Section 3            | Section 4   |       |                      |
|                      |             |       |                      |
|                      +-------------+       +----------------------+
|                      | Section 5   |       | Thumbnails           |
|                      |             |       |  # # # # # # # # # # |
+----------------------+-------------+       |  # # # # # # # # # # |
| Section 6                          |       +----------------------+
|                                    |       | Section 3            | 
+----------------------+-------------+       |                      |
                                             |                      |
  Large View (with thumbnails bottom)        |                      |
+----------------------+-------------+       |                      |
| Section 1            | Section 2   |       |                      |
|                      |             |       +----------------------+
+----------------------+-------------+       | Section 4            |
| Image Slider Section | Section 4   |       |                      |
|                      |             |       +----------------------+
|                      +-------------+       | Section 5            |
|                      | Section 5   |       |                      |
+----------------------+             |       +----------------------+
| Thumbnails           |-------------+       | Section 6            |
| # # # # # # # # # # #|                     |                      |
+----------------------+                     +----------------------+
| Section 3            |
|                      |
|                      |
|                      |
|                      |
|                      |
+----------------------+-------------+
| Section 6                          |
|                                    |
+----------------------+-------------+

Both large views are valuable options.

我被告知我应该首先考虑移动设备来构建和订购我的cols。这是HTML：

<article>
  <div class="container">
    <div class="row">
      <section class="col s12 m8">
        <h5 class="teal-text">Share Buttons Section</h5>
      </section>

      <!--<section class="col s12 m4">-->
      <!--<h5 class="teal-text">Nothing (Just a Placeholder)</h5>-->
      <!--</section>-->


      <section class="col s12 m8">
        <h5 class="teal-text">Section 1</h5>
      </section>

      <section class="col s12 m4">
        <h5 class="teal-text">Section 2</h5>
      </section>

      <section class="col s12 m8">
        <h5 class="teal-text">Pushpin Nav</h5>
      </section>

      <section class="col s12 m8">
        <h5 class="teal-text">Slider Section</h5>
        <div class="col s2 amber" style="margin: 3px; width: 100%; height: 480px"></div>
      </section>

      <section class="col s12 m8">
        <h5 class="teal-text">Slider Thumbnails</h5>
        <div class="row">
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <!--...-->
        </div>
      </section>

      <section class="col s12 m8">
        <h5 class="teal-text">Section 3</h5>
      </section>

      <section class="col s12 m4">
        <h5>Section 4</h5>
      </section>

      <section class="col s12 m4">
        <h5>Section 5</h5>
      </section>

      <section class="col s12">
        <h5>Section 6</h5>
      </section>
    </div>
  </div>
</article>

如果某个部分的内容大于该行的其他内容，则会在大视图的各个部分之间留下一些空隙。好的很酷，所以我遇到了push / pull，我认为会重新排列列，并解决问题，如果我只是将它们推入正确的顺序。但这只会导致重新排序＆＃34;水平空间中的偏移量。差距仍然存在。

我缺少什么，让内容粘在一起？

我非常感谢提供一些示例的详细答案，所以我理解这种问题。

链接到我的jsfiddle示例： https://jsfiddle.net/jkdzgafr/

Answer 1

<强>更新

您可以通过flex CSS属性实现上述网格布局。

有关CSS flex的更多信息，请阅读here

如果您关心与旧浏览器的交叉兼容性，则不建议单独使用display:flex;。您需要添加old flexbox prefixes。作为for IE8 and 9，您可以使用table fallback。来自以下规则集：

.flex-container {
  display: table;        /* IE < 10, Opera *Presto* Desktop (Now dead) */
  display: -webkit-box;  /* Safari 3.1 - 6, Chrome < 21 (2009 Spec), UCBrowser Android */
  display: -moz-box;     /* Firefox 2 - 27 (2009 Spec), UCMini Android */
  display: -ms-flexbox;  /* IE10 (2012 Syntax) */
  display: -webkit-flex; /* Safari 6.1 - 8, Android < 4.4, BB < 10, Chrome 21 - 28 */
  display: flex;         /* Edge 12+, Firefox 28+, Blink, Safari 9+, Opera Mini 8+ */
}

适用于flex items table-cell或table-row后备，特别是使用flexbox嵌套时。

但是，有3种选择：

1）使用Modernizr等脚本进行特征检测。并使用Modernizr CSS文档样式通过JS特征检测声明IE8-9后备规则。像这样：

html.no-flexbox .flex-item {
  display: table-cell;
}

2）使用IE CSS条件样式：

<!--[if lte IE 9]>
    <link rel="stylesheet" type="text/css" href="ie-8-9-fallbacks.css" />
<![endif]-->

OR

3）另一种无JS的方式是使用CSS黑客攻击。显示值将被其他浏览器忽略，并且仅由IE8-9解析和应用。

用：a）

.flex-item {
  display: block;
  display: table-cell\0/; /*IE8-10 */
}

和/或：b）

@media \0screen\,screen\9 { /* IE6-10 and exclude FF2 */
  .flex-item { display: table-cell; }
}

Large View (with thumbnails right) here

的演示

Large View (with thumbnails bottom) here

的演示

CSS：

.justify {
  text-align: justify;
  text-justify: inter-word;
}

@media (min-width: 600px) {
  .d-flex {
    display: flex;
  }
  .h-100p {
    height: 100%
  }
  .h-50p {
    height: 50%;
  }
  .mb-0 {
    margin-bottom: 0;
  }
}

HTML： （大视图 - 缩略图右侧）

<article class="">
  <div class="container">
    <div class="row">
      <section class="col s12 m8 amber lighten-5">
        <h5 class="teal-text">Share Buttons Section</h5>
      </section>
    </div>
    <!--<section class="col s12 m4 red lighten-5">-->
    <!--<h5 class="teal-text">Nothing (Just a Placeholder)</h5>-->
    <!--</section>-->

    <div class="row d-flex">
      <section class="col s12 m8 blue lighten-5">
        <h5 class="teal-text">Section 1</h5>
        <p class="light justify">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto cum cumque deserunt dignissimos error esse expedita illum, magni nobis odit optio quas, quisquam recusandae sequi soluta tempore, vel voluptas voluptatibus.
        </p>
      </section>

      <section class="col s12 m4 red lighten-5">
        <h5 class="teal-text">Section 2</h5>
        <p class="light justify">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, pariatur?<br> Lorem: <a>Lorem ipsum dolor sit.</a>
        </p>
      </section>
    </div>
    <div class="row">
      <section class="col s12 m8 amber lighten-5">
        <h5 class="teal-text">Pushpin Nav</h5>
        <p class="light center">
          <a>Lorem-section</a> - <a>ipsum-section</a> - <a>dolor-section</a> - <a>sit-section</a>
        </p>
      </section>
    </div>
    <div class="row d-flex">
      <section class="col s12 m8 blue lighten-5">
        <h5 class="teal-text">Slider Section</h5>
        <div class="col s2 amber" style="margin: 3px; width: 100%; height: 480px"></div>
      </section>

      <section class="col s12 m4 red lighten-5">
        <h5 class="teal-text">Slider Thumbnails</h5>
        <div class="row">
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
        </div>
      </section>
    </div>
    <div class="row d-flex">
      <div class="col s12 m8">
        <div class="row mb-0">
          <section class="col s12 blue lighten-5">
            <h5 class="teal-text">Section 3</h5>
            <p class="light justify">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis officia quaerat quisquam. Animi beatae excepturi explicabo iste libero modi quae quam. Aliquid placeat similique voluptatum? Atque debitis dolores ex fuga fugit nam natus temporibus ullam
              unde. Adipisci alias aliquid aperiam aspernatur atque aut autem blanditiis distinctio, doloribus ea fuga illum inventore laudantium minus mollitia nulla officia praesentium, quidem soluta tempora, unde vel veniam. Aperiam, corporis dignissimos,
              eveniet fugiat iure neque nobis provident quas rem repellat, sit tempore ut. Assumenda aut nesciunt nihil voluptates. Ad aliquid, animi atque aut culpa debitis dolorem doloribus eaque et facere fugiat impedit in incidunt ipsa labore laborum
              natus nesciunt nisi nulla officiis perspiciatis quasi quidem quisquam quod rem rerum sint sit suscipit tenetur totam ullam vero vitae voluptas. Accusamus aliquid amet commodi dolore dolores error et hic ipsa iusto nihil nisi nobis provident
              quas quibusdam ratione saepe soluta, suscipit? Ab, asperiores autem commodi consectetur culpa cumque deleniti dolorem, doloremque eaque earum eligendi eveniet, ex expedita facere illum laudantium maxime modi neque non nulla obcaecati odio
              optio quia quisquam quod sint sunt totam unde voluptas voluptatibus. Ad aliquam architecto aspernatur assumenda commodi culpa debitis deleniti doloremque eos esse exercitationem incidunt ipsam iste laborum magnam, magni maiores molestias
              necessitatibus neque nesciunt nobis nostrum, omnis possimus provident quaerat qui quod reprehenderit sapiente temporibus totam ullam veritatis vitae voluptatum. Ab animi, delectus ducimus excepturi facilis ipsam natus nulla optio pariatur
              quod repellendus sed, similique suscipit tenetur totam! Accusantium dolor iste iure magnam modi omnis possimus, quod voluptate!Itaque, unde?
            </p>
            <p class="light justify">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis officia quaerat quisquam. Animi beatae excepturi explicabo iste libero modi quae quam. Aliquid placeat similique voluptatum? Atque debitis dolores ex fuga fugit nam natus temporibus ullam
              unde. Adipisci alias aliquid aperiam aspernatur atque aut autem blanditiis distinctio, doloribus ea fuga illum inventore laudantium minus mollitia nulla officia praesentium, quidem soluta tempora, unde vel veniam. Aperiam, corporis dignissimos,
              eveniet fugiat iure neque nobis provident quas rem repellat, sit tempore ut. Assumenda aut nesciunt nihil voluptates. Ad aliquid, animi atque aut culpa debitis dolorem doloribus eaque et facere fugiat impedit in incidunt ipsa labore laborum
              natus nesciunt nisi nulla officiis perspiciatis quasi quidem quisquam quod rem rerum sint sit suscipit tenetur totam ullam vero vitae voluptas. Accusamus aliquid amet commodi dolore dolores error et hic ipsa iusto nihil nisi nobis provident
              quas quibusdam ratione saepe soluta, suscipit? Ab, asperiores autem commodi consectetur culpa cumque deleniti dolorem, doloremque eaque earum eligendi eveniet, ex expedita facere illum laudantium maxime modi neque non nulla obcaecati odio
              optio quia quisquam quod sint sunt totam unde voluptas voluptatibus. Ad aliquam architecto aspernatur assumenda commodi culpa debitis deleniti doloremque eos esse exercitationem incidunt ipsam iste laborum magnam, magni maiores molestias
              necessitatibus neque nesciunt nobis nostrum, omnis possimus provident quaerat qui quod reprehenderit sapiente temporibus totam ullam veritatis vitae voluptatum. Ab animi, delectus ducimus excepturi facilis ipsam natus nulla optio pariatur
              quod repellendus sed, similique suscipit tenetur totam! Accusantium dolor iste iure magnam modi omnis possimus, quod voluptate! Itaque, unde?
            </p>
          </section>
        </div>
      </div>
      <div class="col s12 m4">
        <div class="row h-100p">

          <section class="col s12  red lighten-5 h-50p">
            <h5 class="teal-text">Section 4</h5>
            <p class="light justify">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam consequuntur cupiditate vero?
            </p>
          </section>

          <section class="col s12  red lighten-5 h-50p">
            <h5 class="teal-text">Section 5</h5>
            <p class="light justify">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, pariatur?<br> Lorem: <a>Lorem ipsum dolor sit.</a>
            </p>
          </section>
        </div>
      </div>


    </div>
    <section class="col s12 green lighten-5">
      <h5 class="teal-text">Section 6</h5>
      <p class="light justify">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid atque deserunt ipsa qui quisquam sunt velit. Amet aperiam architecto delectus deserunt, ducimus eos ipsam magni omnis, placeat provident qui quibusdam.
      </p>
    </section>
  </div>

</article>

HTML： （大视图（缩略图底部））

<article class="">
  <div class="container">
    <div class="row">
      <section class="col s12 m8 amber lighten-5">
        <h5 class="teal-text">Share Buttons Section</h5> 
      </section>
    </div>
      <!--<section class="col s12 m4 red lighten-5">-->
      <!--<h5 class="teal-text">Nothing (Just a Placeholder)</h5>-->
      <!--</section>-->

<div class="row d-flex">
      <section class="col s12 m8 blue lighten-5">
        <h5 class="teal-text">Section 1</h5>
        <p class="light justify">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto cum cumque deserunt dignissimos error esse expedita illum, magni nobis odit optio quas, quisquam recusandae sequi soluta tempore, vel voluptas voluptatibus.
        </p>
      </section>

      <section class="col s12 m4 red lighten-5">
        <h5 class="teal-text">Section 2</h5>
        <p class="light justify">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, pariatur?<br> Lorem: <a>Lorem ipsum dolor sit.</a>
        </p>
      </section>
</div>
    <div class="row">
      <section class="col s12 m8 amber lighten-5">
        <h5 class="teal-text">Pushpin Nav</h5>
        <p class="light center">
          <a>Lorem-section</a> - <a>ipsum-section</a> - <a>dolor-section</a> - <a>sit-section</a>
        </p>
      </section>
      </div>
<div class="row d-flex">
<div class="col s12 m8">
<div class="row mb-0">
      <section class="col s12 blue lighten-5">
        <h5 class="teal-text">Slider Section</h5>
        <div class="col s2 amber" style="margin: 3px; width: 100%; height: 480px"></div>
      </section>

      <section class="col s12 red lighten-5">
        <h5 class="teal-text">Slider Thumbnails</h5>
        <div class="row">
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div> 
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div> 
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
        </div>
      </section>

        <section class="col s12 blue lighten-5">
        <h5 class="teal-text">Section 3</h5>
        <p class="light justify">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis officia quaerat quisquam. Animi beatae excepturi explicabo iste libero modi quae quam. Aliquid placeat similique voluptatum? Atque debitis dolores ex fuga fugit nam natus temporibus ullam
          unde. Adipisci alias aliquid aperiam aspernatur atque aut autem blanditiis distinctio, doloribus ea fuga illum inventore laudantium minus mollitia nulla officia praesentium, quidem soluta tempora, unde vel veniam. Aperiam, corporis dignissimos,
          eveniet fugiat iure neque nobis provident quas rem repellat, sit tempore ut. Assumenda aut nesciunt nihil voluptates. Ad aliquid, animi atque aut culpa debitis dolorem doloribus eaque et facere fugiat impedit in incidunt ipsa labore laborum
          natus nesciunt nisi nulla officiis perspiciatis quasi quidem quisquam quod rem rerum sint sit suscipit tenetur totam ullam vero vitae voluptas. Accusamus aliquid amet commodi dolore dolores error et hic ipsa iusto nihil nisi nobis provident
          quas quibusdam ratione saepe soluta, suscipit? Ab, asperiores autem commodi consectetur culpa cumque deleniti dolorem, doloremque eaque earum eligendi eveniet, ex expedita facere illum laudantium maxime modi neque non nulla obcaecati odio optio
          quia quisquam quod sint sunt totam unde voluptas voluptatibus. Ad aliquam architecto aspernatur assumenda commodi culpa debitis deleniti doloremque eos esse exercitationem incidunt ipsam iste laborum magnam, magni maiores molestias necessitatibus
          neque nesciunt nobis nostrum, omnis possimus provident quaerat qui quod reprehenderit sapiente temporibus totam ullam veritatis vitae voluptatum. Ab animi, delectus ducimus excepturi facilis ipsam natus nulla optio pariatur quod repellendus
          sed, similique suscipit tenetur totam! Accusantium dolor iste iure magnam modi omnis possimus, quod voluptate!Itaque, unde?
        </p>
        <p class="light justify">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis officia quaerat quisquam. Animi beatae excepturi explicabo iste libero modi quae quam. Aliquid placeat similique voluptatum? Atque debitis dolores ex fuga fugit nam natus temporibus ullam
          unde. Adipisci alias aliquid aperiam aspernatur atque aut autem blanditiis distinctio, doloribus ea fuga illum inventore laudantium minus mollitia nulla officia praesentium, quidem soluta tempora, unde vel veniam. Aperiam, corporis dignissimos,
          eveniet fugiat iure neque nobis provident quas rem repellat, sit tempore ut. Assumenda aut nesciunt nihil voluptates. Ad aliquid, animi atque aut culpa debitis dolorem doloribus eaque et facere fugiat impedit in incidunt ipsa labore laborum
          natus nesciunt nisi nulla officiis perspiciatis quasi quidem quisquam quod rem rerum sint sit suscipit tenetur totam ullam vero vitae voluptas. Accusamus aliquid amet commodi dolore dolores error et hic ipsa iusto nihil nisi nobis provident
          quas quibusdam ratione saepe soluta, suscipit? Ab, asperiores autem commodi consectetur culpa cumque deleniti dolorem, doloremque eaque earum eligendi eveniet, ex expedita facere illum laudantium maxime modi neque non nulla obcaecati odio optio
          quia quisquam quod sint sunt totam unde voluptas voluptatibus. Ad aliquam architecto aspernatur assumenda commodi culpa debitis deleniti doloremque eos esse exercitationem incidunt ipsam iste laborum magnam, magni maiores moles
          tias necessitatibus
          neque nesciunt nobis nostrum, omnis possimus provident quaerat qui quod reprehenderit sapiente temporibus totam ullam veritatis vitae voluptatum. Ab animi, delectus ducimus excepturi facilis ipsam natus nulla optio pariatur quod repellendus
          sed, similique suscipit tenetur totam! Accusantium dolor iste iure magnam modi omnis possimus, quod voluptate! Itaque, unde?
        </p>
      </section>
      </div>
     </div>

     <div class="col s12 m4">
       <div class="row h-100p">
          <section class="col s12 h-50p  red lighten-5 h-50p">
        <h5 class="teal-text">Section 4</h5>
        <p class="light justify">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam consequuntur cupiditate vero?
        </p>
      </section>

      <section class="col s12  red lighten-5 h-50p">
        <h5 class="teal-text">Section 5</h5>
        <p class="light justify">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, pariatur?<br> Lorem: <a>Lorem ipsum dolor sit.</a>
        </p>
      </section>
       </div>
     </div>
</div>  

      <section class="col s12 h-50p green lighten-5">
        <h5 class="teal-text">Section 6</h5>
        <p class="light justify">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid atque deserunt ipsa qui quisquam sunt velit. Amet aperiam architecto delectus deserunt, ducimus eos ipsam magni omnis, placeat provident qui quibusdam.
        </p>
      </section>
    </div>

</article>

Answer 2

空间是因为该部分的float:left。尝试将第2部分放在float:right处，以解决您的问题。

关于float：它取自文档的正常流程（虽然仍然是其中的一部分）。它向左移动，或直到它接触其包装盒的边缘，或另一个浮动元素。

当前一行左浮动元素高度完成时，放置下一个float元素。

Answer 3

我的解决方案是使用截至6月8日的当前@object_actions($photo) // returns '$photo @object_actions($post) // returns '$post'属性，支持的浏览器数量超过display: flex属性。如果您想在不启用它的情况下进行测试，只需在chrome.com/beta安装Chrome测试版。

CSS-Grid列未正确对齐

3 个答案: