代码之家 › 专栏 › 技术社区 › wildabeast

根据可用空间,在一个全宽大div的上方和下方放置一组小div

css-grid flexbox css

wildabeast · 技术社区 · 3 年前

假设我有一个任意数量的小div和一个大div的布局,我想有一行小div,尽可能多地容纳容器宽度,然后是大div,它占据了整个宽度。它还将在高度上弯曲,保持其纵横比(包含图像)。任何剩余的小div都会在大div之后继续。随着容器的膨胀和收缩,小的div会在空间允许的情况下移动到大的div的下方/上方。希望只使用CSS解决方案(不过对JS开放)。

所以最初:

---------------------
| d1 | d2 | d3 | d4 |
---------------------
|         DB        |
---------------------
| d5 | d6 | d7 | d8 |
---------------------

然后容器收缩,导致这种布局:

----------------
| d1 | d2 | d3 |
----------------
|      DB      |
----------------
| d4 | d5 | d6 | 
----------------
| d7 | d8 |

我正在设想一个flexbox解决方案,但还没有成功。

1 回复 | 直到 3 年前

Andy Jakubowski 3 年前

如果 小提琴 大小可以一样, CSS网格 可能有用。

Flexbox在这里不起作用,因为它不允许您定义这样一种逻辑:用尽可能多的项目填充第一行,然后放置一个大项目,然后继续。在Flexbox中,您必须定义项目放入柔性线的顺序。

CSS Grid 可以更随意地放置网格项。因此,您可以确保您的大div始终横跨所有列,并将其放置在第二行。所有的小隔间都会填满剩下的空间。

不过有一个警告。如果你打算使用CSS网格创建尽可能多的列来适应这个屏幕大小,你就不能根据小div的内容来调整大小。

下面是一个有效解决方案的示例。每个带有小div的列将至少 200px 宽,如果在水平方向上还有剩余的可用空间,它会增长一点。显然,你可以为每个小分区选择自己的最小尺寸。

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

div {
  padding: 24px;
  text-align: center;
  border: 1px solid black;
}

div:nth-of-type(odd) {
  background-color: whitesmoke;
}

.big-div {
  grid-row: 2;
  grid-column: 1 / -1;
}

<main class="grid-container">
  <div>Small</div>
  <div>Small</div>
  <div>Small</div>
  <div class="big-div">Big</div>
  <div>Small</div>
  <div>Small</div>
  <div>Small</div>
  <div>Small</div>
  <div>Small</div>
</main>

Nikola Pavicevic 3 年前

Mabbe你可以试试css网格和 grid-area

.parent {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  justify-items: center;
}

.div5 { grid-area: 2 / 1 / 3 / 5; }


@media (max-width: 400px) {
  .parent {
    grid-template-columns: repeat(3, 1fr);
  }

  .div5 { grid-area: 2 / 1 / 3 / 4; } 
}

<div class="parent">
  <div class="div1">1</div>
  <div class="div2">2</div>
  <div class="div3">3</div>
  <div class="div4">4</div>
  <div class="div5">DB</div>
  <div class="div6">5</div>
  <div class="div7">6</div>
  <div class="div8">7</div>
  <div class="div9">8</div>
</div>

vals 3 年前

如果已知div的高度,可以使用flexbox。

在第一个小div上设置边距,以在第二行中创建空间,将大的移动到该空间中

将代码段悬停以查看其工作情况

.container {
  display: flex;
  width: 200px;
  border: solid 1px black;
  position: relative;
  flex-wrap: wrap;
  transition: linear 5s;
}

html:hover .container {
    width: 900px;
}

div {
  width: 150px;
  height: 50px;
  flex-shrink: 0;
  flex-grow: 0;
  margin: 4px;
  background-color: lightgreen;
}

#first {
   margin-bottom: 60px;  /* big height */
}

div.big {
  width: 100%;
  height: 50px;
  background-color: lightblue;
  position: relative;
  position: absolute;
  transform: translate(0px, 55px);   /* small height */
}

<main class="container">
  <div class="big">Big</div>
  <div id="first">1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</main>