Блог

Главная - Вопросы по программированию - Как мне сделать так, чтобы мой контент был в пользу левого столбца в CSS

Как мне сделать так, чтобы мой контент был в пользу левого столбца в CSS

#html #css #alignment #media-queries #multiple-columns

#HTML #css — код #выравнивание #медиа-запросы #многоколоночный

Вопрос:

У меня есть приложение, которое отображает разные разделы, и я хочу оформить его так, чтобы при изменении размера окна столбцы добавлялись и удалялись, а содержимое динамически упорядочивалось внутри столбцов. Я использую медиа-запрос для добавления столбца в основной контейнер каждые 400 пикселей, а ширина каждого div равна 400 пикселей. Однако.когда есть два столбца и три раздела, переполнение заканчивается в самом правом столбце. Как мне сделать так, чтобы мои столбцы заполнялись слева направо?

 @media (max-width: 1199px) and (min-width: 800px) {
  .main-container {
    column-count: 2;
    padding: 15px;
    margin: 15px;
  }

  .item {
    border: solid black 1px;
    width: 400px;
    -webkit-column-break-inside: avoid;
  }
}

<section class="main-container">

    <div class="item">
        <h2>Title</h2>
        <p>this is a paragrapgh</p>
    </div>

    <div class="item">
        <h2>Title</h2>
        <p>this is a paragrapgh</p>
    </div>

    <div class="item">
        <h2>Title</h2>
        <p>this is a paragrapgh</p>
    </div>

</section>

Комментарии:

1. извините, я забыл добавить строку в css, которая остановила разделение div между двумя столбцами, и не смог понять, как сделать то, что вы делали раньше. Но я очень ценю, что вы отредактировали его для меня, и вы можете редактировать мои вопросы в любое время.

Ответ №1:

Вы можете использовать grid . И теперь всякий раз, когда будет свободное пространство размером 400 пикселей, он добавит новый столбец.

 * {
  box-sizing: border-box;
}
.main-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 400px);
  grid-gap: /* Here you can add whatever spacing between items you want */ ;
  padding: 15px;
  margin: 15px;
}
.main-container > .item {
  border: solid black 1px;
  width: 400px;
} 
 <section class="main-container">
  <div class="item">
    <h2>Title</h2>
    <p>this is a paragrapgh</p>
  </div>
  <div class="item">
    <h2>Title</h2>
    <p>this is a paragrapgh</p>
  </div>
  <div class="item">
    <h2>Title</h2>
    <p>this is a paragrapgh</p>
  </div>
</section>

Комментарии:

1. разрыв , а не болтовня .

2. В любом случае, ваш фрагмент не работает без HTML.

3. @AbsoluteBeginner да, tnx за редактирование, неправильно написано «пробел» 🙂

Ответ №2:

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

 .main-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 400px));
}
Метки: ,