CSS: как я могу отобразить 1, 2 или 4 столбца, но никогда не 3 столбца?

#html #css

#HTML #css

Вопрос:

Как я могу использовать css, чтобы убедиться, что следующий код может отображаться как 1, 2 или 4 столбца, но никогда как 3 столбца?

 .container {
    display: flex;
    flex-wrap: wrap;
    border: 3px solid rgb(0, 0, 0);
}

.panel {
    height: 100px;
    width: 100px;
    border: 3px solid rgb(255, 0, 0);
    margin: 10px 0px 0px 10px;
}

 <div class="container">
    <div class="panel"></div>
    <div class="panel"></div>
    <div class="panel"></div>
    <div class="panel"></div>
</div>

Ответ №1:

Итак, все зависит от ширины, поскольку вы используете flex-box . если вы хотите, чтобы элемент занимал всю строку, укажите контейнер width 100% , и если вы хотите, чтобы 2 элемента находились рядом друг с другом, укажите его width:50% , если вам нужно 4 элемента, тогда обязательно укажите его 25% ширину.

Я создал этот адаптивный пример, я использовал имена, которые использует bootstrap, чтобы упростить понимание, если вы используете bootstrap.

Обратите внимание, что вы должны работать внутри div класса with wrap .

 .container {
  display: flex;
  flex-wrap: wrap;
  outline: 3px solid rgb(0, 0, 0);
}

.panel {
  height: 100px;
  outline: 2px solid rgb(255, 0, 0);
  background-color: green;
}

.wrap {
  margin: 0 1rem;
  height: 100%;
  background-color: blueviolet;
  color: white;
}

.col-12 {
  width: 100%;
}

@media (min-width: 768px) {
  .col-mid-6 {
    width: 50%;
  }
}

@media (min-width: 1200px) {
  .col-xl-4 {
    width: 25%;
  }
}

 <div class="container">
  <div class="panel col-12 col-mid-6 col-xl-4">
    <div class="wrap">div1</div>
  </div>
  <div class="panel col-12 col-mid-6 col-xl-4">
    <div class="wrap">div2</div>
  </div>
  <div class="panel col-12 col-mid-6 col-xl-4">
    <div class="wrap">div3</div>
  </div>
  <div class="panel col-12 col-mid-6 col-xl-4">
    <div class="wrap">div4</div>
  </div>
</div>

если это не помогло, дайте мне знать.

1. Это отличный пример, но то, что я ищу, — это возможность для контейнера flex содержать 1, 2 или 4 элемента при расширении flex, но никогда 3. Большое вам спасибо за вашу тяжелую работу.

2. Отлично, все, что вам нужно, это удалить класс, который вы не хотите исправлять. Допустим, вам нужно только 4 элемента рядом друг с другом. Просто просто сохраните класс col-xl-4 и удалите col-12 , и col-mid-6 в итоге вы получите 4 фиксированных элемента рядом друг с другом.

3. В этом примере я не использую bootstrap. Это чистый CSS. В любом случае, чтобы помочь. Мне нужен скриншот желаемого результата.

4. Ах, ты лучший. Это фантастическая работа и решает большинство моих проблем с css. Я надеюсь, что у тебя отличный день, мой друг.

5. рад помочь. приятель