Столбцы CSS-Grid не выравниваются должным образом

По сути, я часто сталкиваюсь с такой проблемой, что столбцы моей сетки не выравниваются должным образом. (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.

Мне сказали, что я должен структурировать и упорядочивать столбцы с учетом приоритета мобильных устройств. Это 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/

04.06.2017

Раздел миниатюр слайдера для (большой вид с миниатюрами справа был бы) <section class="col s12 m4"> вместо этого. Тот же порядок. Ссылка: jsfiddle.net/jkdzgafr/1 04.06.2017
Возможно, используйте bootstrap 4. Это позволяет вам сделать это из коробки, посмотрите ссылку здесь: v4-alpha.getbootstrap.com/components/card/#card-columns 07.06.2017
Во-первых, я должен поблагодарить за ваш комментарий @Syfer. Но я не думаю, что это типичное каменное поведение для карт (со случайным содержимым), которое я ищу. Materializecss также предлагает предварительную реализацию этого, ища .col и переставляя их: materializecss .com/templates/masonry-template/preview.html Это определенно что-то, что идет в направлении того, чего я хочу достичь, но на основе макета. (более статично). Я попробовал это на примере, который я предоставил, но это имеет некоторые уродливые побочные эффекты. jsfiddle.net/jkdzgafr/6 07.06.2017
Хорошо, извините, уродливые побочные эффекты были вызваны .cols, которые я использовал для миниатюрных изображений, которые также имели класс .col для элементов. Исправление этого jsfiddle.net/jkdzgafr/7, но это просто неправильно выравнивает столбцы .m4, они используются как столбцы размером .s12. 07.06.2017

Ответы:

Обновлено

Вы можете добиться упомянутого макета сетки с помощью свойства flex CSS.

для получения дополнительной информации о CSS flex вы можете прочитать здесь

Если вы заботитесь о кросс-совместимости со старыми браузерами, как следует, 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. И используйте стиль документа CSS Modernizr, чтобы объявить резервные правила IE8-9 с помощью обнаружения функций JS. Как это:

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 */
}

и/или: б)

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

Демо для Large View (with thumbnails right) здесь

Демо для Large View (with thumbnails bottom) здесь

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>

07.06.2017

display: flex кажется довольно крутым. Как я вижу, вы просто поместили display: flex; на каждый .row-div, вокруг которого должны перемещаться остальные div? (Что было Разделом 1 и (Разделом Слайдера или Разделом 3)) 07.06.2017

Но подождите, flex — это совершенно новая функция браузера (например, сетка w3.org/TR /css-grid-1, который еще новее), который не будет поддерживаться браузером в старом браузере?! Может есть альтернативная реализация? 07.06.2017

@MrMAG flexbox поддерживается IE10+ и всеми основными браузерами. Для получения дополнительной информации о поддержке flexbox посетите здесь. Так как есть fallbacks available для flexbox, доступных и для ancient browsers. Для IE8 и 9 вы можете использовать запасной вариант таблицы, действительно ориентированный на настольный браузер IE8. Я обновлю свой ответ, указав доступные запасные варианты для старых браузеров. 07.06.2017

Спасибо за ваши усилия. Этот ответ в значительной степени отвечает на то, о чем я просил. 10.06.2017

Пробел из-за float:left для раздела. Попробуйте поместить Раздел 2 с float:right, который решит вашу проблему.

Насчет флота: он вырван из нормального потока документа (хотя и остается его частью). Он сдвигается влево или вправо, пока не коснется края содержащего его блока или другого плавающего элемента.

Следующий элемент с плавающей запятой размещается, когда высота плавающего элемента с левой стороны предыдущей строки завершается.

07.06.2017

Мое решение состоит в том, чтобы использовать свойство display: flex, которое в настоящее время, по состоянию на 8 июня, поддерживается большим количеством браузеров, чем свойство display: grid. Если вы хотите протестировать его без включения, просто установите Chrome BETA со страницы chrome.com/beta.

08.06.2017

Новые материалы

Кластеризация: более глубокий взгляд

Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..

Как написать эффективное резюме

Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..

Частный метод Python: улучшение инкапсуляции и безопасности

Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..

Как я автоматизирую тестирование с помощью Jest

Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..

Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)

Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..

Понимание расстояния Вассерштейна: мощная метрика в машинном обучении

В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..

Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot

В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..

Machine Learning JavaScript Blockchain Artificial Intelligence Data Science Cryptocurrency Software Development Python Web Development Coding Deep Learning AI Bitcoin React Software Engineering Ethereum Web3 Business Crypto Nodejs Solidity Development Front End Development Data Finance Money Java Trading Smart Contracts Typescript Productivity Tech Startup Investing Neural Networks Developer Computer Science NLP