基本上,我经常遇到这样的问题,即网格的列没有按预期对齐。(BootstrapMaterializecss和其他人)每次遇到同一个问题,有时我会把它修好,有时我会花上几个小时努力让它工作。
这真是一个警告,我真的不知道为什么会发生这个问题,以及如何解决它在未来的项目!
问题如下:
我有一个布局示例(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.

有人告诉我,我应该先考虑手机的结构和订购。这是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,我认为这会重新排序列,并解决问题,如果我只是推拉到正确的顺序。但这只会导致“重新排序”水平空间中的偏移量。差距仍然存在。
我错过了什么,让内容粘在一起?
我非常感谢提供一些例子的详细回答,所以我理解这类问题。
链接到我的jsfiddle示例:
https://jsfiddle.net/jkdzgafr/

最佳答案

更新
您可以通过flexCSS属性实现上述网格布局。
有关CSSflex的更多信息,请阅读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 itemstable-celltable-row回退,特别是对于flexbox嵌套。
但是,有3个选项可用:
1)将特征检测与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]-->

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

关于html - CSS-Grid列未正确对齐,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/44354202/

10-09 18:19
查看更多