Укладка стека столбцов, когда нет содержимого

Question

Я осмотрелся, но не смог найти ничего, описывающего мою проблему. У меня есть 5 элементов раздела в основном теге, из которых 3 из них содержат текст и изображения.

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

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

Кодекс:

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

Вы можете добавить display:inline-flex на главную Вы также можете найти пример, который я сделал here, также я добавил поддержку столбцам счетчик для других браузеров. Если вы хотите просмотреть его в фрагменте, нажмите «полная страница». Я надеюсь, что это поможет :)

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>