javascript - 如何在特定浏览器宽度下将一行div平均拆分为两行

Question

下面我提供了一个jsfiddle来说明我的问题:

https://jsfiddle.net/1vf8wgeu/

我有一排 12 个“div”(实际上是链接，但看起来和行为都像 div)。 12 个 div 中的每一个都有一种颜色和一个设置的百分比宽度，并且该行拉伸(stretch) 100% 的屏幕宽度。

然而，在一定的屏幕宽度下，这些 div 变得太小了。在一定的屏幕宽度(比如 700 像素)下，我如何让这一行变成两行，顶行 6 行，底行 6 行？问题是这两行仍然必须各自具有 100% 的宽度，并且 div 本身必须是宽度的两倍(因为它们将占据两行)。

我尝试重新格式化 HTML 并在媒体查询中使用 white-space: pre 但这留下了行/div 未拉伸(stretch) 100% 的问题，并且行中间有一个间隙并且媒体查询未激活。

非常感谢任何解决方案，谢谢。

此处显示的是框未拉伸(stretch) 100% 宽度的问题

Answer 1

你可以使用flexbox。通过将 anchor 分成两组，这就是我想出的。请注意，我确实捏造了一个百分比来让它工作，所以它与你原来的宽度不太匹配。

HTML

<div class="main">
  <aside class="first">
    <a></a><a></a><a></a><a></a><a></a><a></a>
  </aside>
  <aside class="second">
    <a></a><a></a><a></a><a></a><a></a><a></a>
  </aside>
</div>

CSS

div.main {
  display: flex;
  flex-direction: column;
  width: 100%;
}

aside {
  display: flex;
  flex-direction: row;
  width: 100%;
}

aside a {
  height: 50px;
  display: flex;
}

/*widths and colors*/

.first a:nth-child(1) {
  width: calc(12% *2);
  background-color: hsl(65, 100%, 75%);
}

.first a:nth-child(2) {
  width: calc(7% * 2);
  background-color: hsl(20, 100%, 60%);
}

.first a:nth-child(3) {
  width: calc(7% * 2);
  background-color: hsl(40, 100%, 75%);
}

.first a:nth-child(4) {
  width: calc(5% *2);
  background-color: hsl(60, 100%, 60%);
}

.first a:nth-child(5) {
  width: calc(14% *2);
  background-color: hsl(80, 100%, 65%);
}

.first a:nth-child(6) {
  width: calc(7% * 2);
  background-color: hsl(100, 100%, 60%);
}

.second a:nth-child(1) {
  width: calc(11% * 2);
  background-color: hsl(260, 100%, 75%);
}

.second a:nth-child(2) {
  width: calc(11% * 2);
  background-color: hsl(140, 100%, 60%);
}

.second a:nth-child(3) {
  width: calc(5% * 2);
  background-color: hsl(160, 100%, 75%);
}

.second a:nth-child(4) {
  width: calc(7% * 2);
  background-color: hsl(180, 100%, 60%);
}

.second a:nth-child(5) {
  width: calc(5% * 2);
  background-color: hsl(200, 100%, 75%);
}

.second a:nth-child(6) {
  width: calc(11% * 2);
  background-color: hsl(220, 100%, 60%);
}

/* Desktops and laptops ----------- */
@media only screen
and (min-width : 600px) {
  div.main {
    flex-direction: row;
  }
}

DEMO