时间戳

首页 > 解决方案 > CSS：如何使显示为 1、2 或 4 列，而不是 3 列？

html - CSS：如何使显示为 1、2 或 4 列，而不是 3 列？

问题描述

如何使用 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>

标签： htmlcss

解决方案

因此，自从您使用flex-box. 如果您希望一个项目占据整行，请提供容器width，100%如果您希望 2 个项目彼此相邻，请提供它，width:50%如果您想要 4 个项目，请确保给它25%宽度。

我制作了这个响应式示例，我使用了 bootstrap 使用的名称，以便在您使用 bootstrap 时更容易理解。

请注意，您应该在divwith 类中工作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>

如果那没有帮助让我知道。

推荐阅读