CSS-Grid-Spalten sind nicht richtig ausgerichtet

Grundsätzlich stoße ich oft auf diese Art von Problem, dass die Spalten meines Rasters nicht wie gewünscht ausgerichtet sind. (, Materializecss und andere) Jedes Mal das gleiche Problem, manchmal bekomme ich es behoben, andere Male kämpfe ich stundenlang, um es zum Laufen zu bringen.CSS-Grid-Spalten sind nicht richtig ausgerichtet

Das ist wirklich ärgerlich und ich möchte wirklich wissen, warum dieses Problem passiert und wie man es in zukünftigen Projekten lösen kann!

Die Probleme sind folgende:

ich ein Layout Beispiel habe (jsfiddle), die ich sovle will. Es verwendet Materializecss mit einigen Abschnitten.

Mir wurde gesagt, dass ich meine Cols mit Mobile-zuerst strukturieren und bestellen sollte. Das ist die 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>

Dies läßt einige Lücken zwischen den Abschnitten in der großen Ansicht, wenn der Inhalt eines Abschnitts ist größer als die andere für diese Zeile zu bleiben. Ok cool, also bin ich auf push/pull gestoßen, was ich dachte, würde die Spalten neu anordnen, und das Problem beheben, wenn ich nur dränge und ziehe sie in die richtige Reihenfolge. Aber das bewirkt nur, dass der Offset im horizontalen Raum neu geordnet wird. Lücken immer noch da.

Was fehlt mir, um den Content-Stick zusammenzuhalten?

Ich schätze wirklich eine ausführliche Antwort, die einige Beispiele gibt, also verstehe ich diese Art von Problem.

Link zu meinem jsfiddle Beispiel: https://jsfiddle.net/jkdzgafr/

Quelle

2017-06-04 MrMAG

Schieberegler Thumbnails Abschnitt für die (große Ansicht mit Thumbnails auf der rechten Seite wäre) '' statt. Die selbe Reihenfolge. Link: https://jsfiddle.net/jkdzgafr/1/ – MrMAG

Vielleicht Bootstrap 4 verwenden. Es ermöglicht Ihnen, es aus der Box zu tun, überprüfen Sie den Link hier: http://v4-alpha.getbootstrap.com/components/card/# card-columns – Syfer

Zuerst muss ich mich bei @Syfer bedanken. Aber ich denke nicht, dass es das typische maurerartige Verhalten für Karten (mit zufälligem Inhalt) ist, nach denen ich suche. Materializecss bietet auch eine Vorschau-Implementierung, indem Sie nach den '.col's suchen und diese neu anordnen: http://materializecss.com/templates/murystone-template/preview.html Es ist definitiv etwas, was in die Richtung geht, was ich erreichen möchte, aber basierend auf dem Layout. (auf eine statische Art). Ich habe es an dem Beispiel versucht, das ich zur Verfügung gestellt habe, aber das hat einige hässliche Nebenwirkungen. https://jsfiddle.net/jkdzgafr/6/ – MrMAG

Aktualisiert

Sie können erreichen, um das genannte Grid-Layout über flex CSS-Eigenschaft.

für weitere Informationen über CSS flex Sie here

lesen Wenn Sie über Cross-Kompatibilität mit älteren Browsern sorgen, wie Sie sollten, display:flex; allein wird nicht empfohlen. Sie müssen diese old flexbox prefixes hinzufügen. Als for IE8 and 9 können Sie eine table fallback verwenden. Welche kommt zu folgendem Regelsatz:

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

Für den flex itemstable-cell oder table-row Fallbacks, vor allem mit Flexbox Verschachtelung.

Allerdings gibt es drei Möglichkeiten zur Verfügung:

1) Verwenden Sie Feature-Erkennung mit einem Skript wie Modernizr. Verwenden Sie den CSS-Dokumententwurf von Modernizr, um die IE8-9-Fallbackregeln über die JS-Featureerkennung zu deklarieren.Wie folgt aus:

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

2) Verwenden Sie IE CSS bedingte Styling:

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

3) Die andere nicht-JS Art und Weise CSS-Hacks verwendet. Mit einem Anzeigewert, der von anderen Browsern ignoriert und nur von IE8-9 analysiert und angewendet wird.

mit: a)

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

und/oder: b)

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

Demo für Large View (with thumbnails right)here

Demo für 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:(Große Ansicht - mit Thumbnails rechts)

<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:(Grossansicht (mit Thumbnails unten))

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

Quelle

2017-06-07 10:53:07

'display: flex' scheint ziemlich cool zu sein. Wie ich sehen kann, setzen Sie einfach 'display: flex;' auf jedes '.row'-div, auf dem die restlichen divs" herumflektieren "sollen. _ (Was war Abschnitt 1 & (Slider Abschnitt oder Abschnitt 3)) _ – MrMAG

Aber warten Sie, Flex ist eine ziemlich neue Browser-Funktion (wie Grid https://www.w3.org/TR/css-grid-1/ welche ist noch neueren), die Browser-Unterstützung auf älteren Browser fehlen würde ?! Gibt es vielleicht eine alternative Implementierung? – MrMAG

@MrMAG Die 'flexbox' wird von IE10 + und allen gängigen Browsern unterstützt. Weitere Informationen zur flexbox-Unterstützung finden Sie [hier] (https://caniuse.com/#search=flex). Da es für Flexbox auch "Fallbacks" gibt, die auch für "alte Browser" verfügbar sind. Für IE8 und 9 können Sie ein Tabellen-Fallback verwenden, das tatsächlich auf den IE8-Desktop-Browser abzielt. Ich werde meine Antwort mit verfügbaren Fallbacks für alte Browser aktualisieren. –

Platz ist wegen float:left für den Abschnitt. Versuchen Sie den Abschnitt 2 mit float:right, der Ihr Problem lösen wird.

Über Float: Es ist aus dem normalen Fluss des Dokuments entnommen (obwohl immer noch ein Teil davon). Es wird nach links verschoben, oder , bis es den Rand der enthaltenen Box berührt, oder ein anderes floated-Element.

Das nächste Float-Element wird platziert, wenn die vorherige Zeile links schwebte Elementhöhe abgeschlossen ist.

Quelle

2017-06-07 15:34:38

Meine Lösung ist, die display: flex Eigenschaft zu verwenden, die zur Zeit ist ab dem 8. Juni von mehr Browsern als die display: grid Eigenschaft unterstützt. Wenn Sie es testen möchten, ohne es zu aktivieren, installieren Sie einfach Chrome BETA unter chrome.com/beta.

Quelle

2017-06-08 14:47:22

CSS-Grid-Spalten sind nicht richtig ausgerichtet

Antwort

Verwandte Themen