CSS-Grid列没有正确对齐

基本上，我经常遇到这种问题，我的网格列不按预期对齐。（Bootstrap,Materializecss和其他）每次都有同样的问题，有时我会修复它，有时候我会努力工作几个小时。CSS-Grid列没有正确对齐

这实际上是annoying，我真的不想知道为什么会发生这个问题，以及如何解决它在未来的项目！

存在的问题如下：

我有一个配置例（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，我认为会重新排序列，并解决问题，如果我只是推拉他们到正确的顺序。但这只是为了“重新排序”水平空间中的偏移量。差距仍然存在。

我错过了什么，让内容粘在一起？

我真的很感谢提供一些例子的详细答案，所以我理解这类问题。

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

来源

2017-06-04 MrMAG

滑块缩略图部分为（大视图，缩略图在右边）为

“。相同的顺序。链接：https：//jsfiddle.net/jkdzgafr/1/ – MrMAG

也许使用bootstrap 4.它允许你开箱即用，看看这里的链接：http://v4-alpha.getbootstrap.com/components/card /＃card-columns – Syfer

首先，我要说谢谢你的评论@Syfer。但是，我不认为这是我寻找的卡片（具有随机内容）的典型砖石行为。 Materializecss也提供了预览实现，通过查找'.col'并重新排列它们：http://materializecss.com/templates/masonry-template/preview。html 这绝对是一些我想要完成的事情的方向，但基于布局。（以更静态的方式）。我尝试了我提供的例子，但是这有一些丑陋的副作用。 https://jsfiddle.net/jkdzgafr/6/ – MrMAG

更新

可以实现通过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 itemstable-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]-->

3）其他无JS的方法是使用CSS黑客。显示值将被其他浏览器忽略，只能由IE8-9解析和应用。

：一个）

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

来源

2017-06-07 10:53:07

'display：flex'似乎很酷。正如我所看到的，你只需在每个'.row'-div上放置'display：flex;'，其余的div应该“弯曲” _（这是第1部分和（滑块部分或第3部分））_ – MrMAG

但是等等，flex是一个相当新的浏览器功能（比如grid https://www.w3.org/TR/css-grid-1/）甚至更新），这将缺乏旧浏览器的浏览器支持？！可能有其他的实现吗？ – MrMAG

@MrMAG IE10 +支持的flexbox和所有主流浏览器。有关Flexbox支持的更多信息，请访问[此处]（https://caniuse.com/#search=flex）。就像以前那样，“古代浏览器”也有可用于flexbox的'fallbacks'。对于IE8和9，您可以使用确实针对IE8桌面浏览器的表格回退。我将用旧版浏览器的可用回退更新我的回答。 –

空间是因为该部分为float:left。尝试将第2部分与float:right这将解决您的问题。

关于float：它从文档的正常流程（尽管仍然是其中的一部分）中取出。它向左移动，或向右移动，直到碰到其包含框的边缘或其他浮动元素。

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

来源

2017-06-07 15:34:38

我的解决方案是使用display: flex属性，该属性当前是截至6月8日，支持更多浏览器而不是display: grid属性。如果您想在无需启用的情况下进行测试，只需安装Chrome BETA chrome.com/beta即可。

来源

2017-06-08 14:47:22

CSS-Grid列没有正确对齐

回答

相关问题