Spaltenanzahl stapeln, wenn kein Inhalt vorhanden ist

Question

Ich habe mich umgesehen, konnte aber nichts finden, das mein Problem beschreibt. Ich habe 5 Abschnittselemente in einem Haupt-Tag, von denen 3 Text und Bilder enthalten.

Ich versuche, jeden Abschnitt in einer Spalte nebeneinander mit Spaltenanzahl zu erhalten, jedoch die letzten zwei Spalten ohne Text und Bilderstapel statt nebeneinander zu bleiben. Ich habe ein Bild unten angehängt.

Wenn ich die gleichen Bilder und Text hinzufügen, funktioniert es wie es sollte, aber ich würde gerne wissen, ob ich leere Spalten haben kann, da ich noch keinen Inhalt für sie habe.

Der Code:

main { 
 
    -webkit-column-count: 5; /* Chrome, Safari, Opera */ 
 
    -moz-column-count: 5; /* Firefox */ 
 
    column-count: 5; 
 
} 
 
li { 
 
    list-style: none; 
 
} 
 
.office { 
 
    margin-top: 5%; 
 
    display:inline-block; 
 
    width: 100%; 
 
    text-align: center; 
 
} 
 
.office_border { 
 
    border: 2px solid #95cccc; 
 
    width: 150px; 
 
    margin: auto; 
 
} 
 
.office_title { 
 
    font: normal 1.9rem DIN; 
 
} 
 
.office_properties { 
 
    padding: 0; 
 
} 
 
.office_properties_title { 
 
    font: 0.8rem 'Josefin Sans'; 
 
} 
 
.office_properties_title_text { 
 
    font-weight: normal; 
 
} 
 
.office_properties_item_image { 
 
    width: 100%; 
 
} 
 
.office_properties_button { 
 
    padding: 5%; 
 
} 
 
.office_properties_link { 
 
    font-family: 'Josefin Sans'; 
 
    text-decoration: none; 
 
    color: #c0392b; 
 
}

<main> 
 
    <section class="office"> 
 
     <h1 class="office_title">TITLE</h1> 
 
     <ul class="office_properties"> 
 
      <div class="office_border"></div> 
 
      <li class="office_properties_title"> 
 
       <h2 class="office_properties_title_text">Heading</h2> 
 
      </li> 
 
      <li class="office_properties_item"> 
 
       <a href=""><img src="https://placekitten.com/300/200" alt="" class="office_properties_item_image"></a> 
 
      </li> 
 
      <li class="office_properties_button"> 
 
       <a href="" class="office_properties_link">DISCOVER</a> 
 
      </li> 
 
      <div class="office_border"></div> 
 
     </ul> 
 
    </section> 
 
    <section class="office"> 
 
     <h1 class="office_title">TITLE</h1> 
 
     <ul class="office_properties"> 
 
      <div class="office_border"></div> 
 
      <li class="office_properties_title"> 
 
       <h2 class="office_properties_title_text">Heading</h2> 
 
      </li> 
 
      <li class="office_properties_item"> 
 
       <a href=""><img src="https://placekitten.com/300/200" alt="" class="office_properties_item_image"></a> 
 
      </li> 
 
      <li class="office_properties_button"> 
 
       <a href="" class="office_properties_link">DISCOVER</a> 
 
      </li> 
 
      <div class="office_border"></div> 
 
      <li class="office_properties_title"> 
 
       <h2 class="office_properties_title_text">Heading</h2> 
 
      </li> 
 
      <li class="office_properties_item"> 
 
       <a href=""><img src="https://placekitten.com/300/200" alt="" class="office_properties_item_image"></a> 
 
      </li> 
 
      <li class="office_properties_button"> 
 
       <a href="" class="office_properties_link">DISCOVER</a> 
 
      </li> 
 
      <div class="office_border"></div> 
 
     </ul> 
 
    </section> 
 
    <section class="office"> 
 
     <h1 class="office_title">TITLE</h1> 
 
     <ul class="office_properties"> 
 
      <div class="office_border"></div> 
 
      <li class="office_properties_title"> 
 
       <h2 class="office_properties_title_text">Heading</h2> 
 
      </li> 
 
      <li class="office_properties_item"> 
 
       <a href=""><img src="https://placekitten.com/300/200" alt="" class="office_properties_item_image"></a> 
 
      </li> 
 
      <li class="office_properties_button"> 
 
       <a href="" class="office_properties_link">DISCOVER</a> 
 
      </li> 
 
      <div class="office_border"></div> 
 
      <li class="office_properties_title"> 
 
       <h2 class="office_properties_title_text">Heading</h2> 
 
      </li> 
 
      <li class="office_properties_item"> 
 
       <a href=""><img src="https://placekitten.com/300/200" alt="" class="office_properties_item_image"></a> 
 
      </li> 
 
      <li class="office_properties_button"> 
 
       <a href="" class="office_properties_link">DISCOVER</a> 
 
      </li> 
 
      <div class="office_border"></div> 
 
     </ul> 
 
    </section> 
 
    <section class="office"> 
 
     <h1 class="office_title">TITLE</h1> 
 
     <ul class="office_properties"> 
 
      <div class="office_border"></div> 
 
      <li class="office_properties_title"> </li> 
 
      <li class="office_properties_item"> </li> 
 
     </ul> 
 
    </section> 
 
    <section class="office"> 
 
     <h1 class="office_title">TITLE</h1> 
 
     <ul class="office_properties"> 
 
      <div class="office_border"></div> 
 
      <li class="office_properties_title"> </li> 
 
      <li class="office_properties_item"> </li> 
 
     </ul> 
 
    </section> 
 
</main>

Answer 1

Sie display:inline-flex zur Haupt hinzufügen können Sie auch ein Beispiel, das ich here gemacht finden, auch Unterstützung für Spalten- I hinzugefügt Zähle für andere Browser. Wenn Sie es im Snippet ansehen möchten, klicken Sie auf "ganze Seite". Ich hoffe, dass diese Hilfe :)

main { 
 
    display:inline-flex; 
 
    -webkit-column-count: 5; /* Chrome, Safari, Opera */ 
 
    -moz-column-count: 5; /* Firefox */ 
 
    column-count: 5; 
 
    
 
} 
 

 
li { 
 
    list-style: none; 
 
} 
 

 
.office { 
 
    margin-top: 5%; 
 
    display:inline-block; 
 
    width: 100%; 
 
    text-align: center; 
 
} 
 

 
.office_border { 
 
    border: 2px solid #95cccc; 
 
    width: 150px; 
 
    margin: auto; 
 
} 
 

 
.office_title { 
 
    font: normal 1.9rem DIN; 
 
} 
 

 
.office_properties { 
 
    padding: 0; 
 
} 
 

 
.office_properties_title { 
 
    font: 0.8rem 'Josefin Sans'; 
 
} 
 

 
.office_properties_title_text { 
 
    font-weight: normal; 
 
} 
 

 
.office_properties_item_image { 
 
    width: 100%; 
 
} 
 

 
.office_properties_button { 
 
    padding: 5%; 
 
} 
 

 
.office_properties_link { 
 
    font-family: 'Josefin Sans'; 
 
    text-decoration: none; 
 
    color: #c0392b; 
 
}

<main> 
 
     <section class="office"> 
 
      <h1 class="office_title">TITLE</h1> 
 
      <ul class="office_properties"> 
 
       <div class="office_border"></div> 
 
       <li class="office_properties_title"> 
 
        <h2 class="office_properties_title_text">Heading</h2> 
 
       </li> 
 
       <li class="office_properties_item"> 
 
        <a href=""><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b7/Strokkur_21_(js).jpg/668px-Strokkur_21_(js).jpg" alt="" class="office_properties_item_image"></a> 
 
       </li> 
 
       <li class="office_properties_button"> 
 
        <a href="" class="office_properties_link">DISCOVER</a> 
 
       </li> 
 
       <div class="office_border"></div> 
 
      </ul> 
 
     </section> 
 
     <section class="office"> 
 
      <h1 class="office_title">TITLE</h1> 
 
      <ul class="office_properties"> 
 
       <div class="office_border"></div> 
 
       <li class="office_properties_title"> 
 
        <h2 class="office_properties_title_text">Heading</h2> 
 
       </li> 
 
       <li class="office_properties_item"> 
 
        <a href=""><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b7/Strokkur_21_(js).jpg/668px-Strokkur_21_(js).jpg" alt="" class="office_properties_item_image"></a> 
 
       </li> 
 
       <li class="office_properties_button"> 
 
        <a href="" class="office_properties_link">DISCOVER</a> 
 
       </li> 
 
       <div class="office_border"></div> 
 
      </ul> 
 
     </section> 
 
     <section class="office"> 
 
      <h1 class="office_title">TITLE</h1> 
 
      <ul class="office_properties"> 
 
       <div class="office_border"></div> 
 
       <li class="office_properties_title"> 
 
        <h2 class="office_properties_title_text">Heading</h2> 
 
       </li> 
 
       <li class="office_properties_item"> 
 
        <a href=""><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b7/Strokkur_21_(js).jpg/668px-Strokkur_21_(js).jpg" alt="" class="office_properties_item_image"></a> 
 
       </li> 
 
       <li class="office_properties_button"> 
 
        <a href="" class="office_properties_link">DISCOVER</a> 
 
       </li> 
 
       <div class="office_border"></div> 
 
      </ul> 
 
     </section> 
 
     <section class="office"> 
 
      <h1 class="office_title">TITLE</h1> 
 
      <ul class="office_properties"> 
 
       <div class="office_border"></div> 
 
       <li class="office_properties_title"> 
 
        <h2 class="office_properties_title_text">Heading</h2> 
 
       </li> 
 
       <li class="office_properties_item"> 
 
        <a href=""><img src="assets/properties/21JS.jpg" alt="" class="office_properties_item_image"></a> 
 
       </li> 
 
       <li class="office_properties_button"> 
 
        <a href="" class="office_properties_link">DISCOVER</a> 
 
       </li> 
 
       <div class="office_border"></div> 
 
      </ul> 
 
     </section> 
 
     <section class="office"> 
 
      <h1 class="office_title">TITLE</h1> 
 
      <ul class="office_properties"> 
 
       <div class="office_border"></div> 
 
       <li class="office_properties_title"> 
 
        <h2 class="office_properties_title_text">Heading</h2> 
 
       </li> 
 
       <li class="office_properties_item"> 
 
        <a href=""><img src="assets/properties/21JS.jpg" alt="" class="office_properties_item_image"></a> 
 
       </li> 
 
       <li class="office_properties_button"> 
 
        <a href="" class="office_properties_link">DISCOVER</a> 
 
       </li> 
 
       <div class="office_border"></div> 
 
      </ul> 
 
     </section> 
 
    </main>