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

Question

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

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

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

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

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

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

Answer 1

这是我能想到的最好的。我使用媒体查询更改了所有 <a></a> 标签中间的 <b></b> 标签。我还更改了样式 sheet 中初始 <a> 标签的所有百分比，使它们的大小都均匀...

<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        @media only screen and (max-width: 700px) {
            body {
                background-color: lightblue;
            }
            b {
                display:block;
            }
            a {
                width: 16.66% !important;
            }
       }

        aside {
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }

            aside a {
                height: 150px;
                display: inline-block;
                vertical-align: top;
            }

        /*widths and colors*/
        a:nth-of-type(1) {
            width: 8.33%;
            background-color: hsl(0,100%,75%);
        }

        a:nth-of-type(2) {
            width: 8.33%;
            background-color: hsl(20,100%,60%);
        }

        a:nth-of-type(3) {
            width: 8.33%;
            background-color: hsl(40,100%,75%);
        }

        a:nth-of-type(4) {
            width: 8.33%;
            background-color: hsl(60,100%,60%);
        }

        a:nth-of-type(5) {
            width: 8.33%;
            background-color: hsl(80,100%,65%);
        }

        a:nth-of-type(6) {
            width: 8.33%;
            background-color: hsl(100,100%,60%);
        }

        a:nth-of-type(7) {
            width: 8.33%;
            background-color: hsl(260,100%,75%);
        }

        a:nth-of-type(8) {
            width: 8.33%;
            background-color: hsl(140,100%,60%);
        }

        a:nth-of-type(9) {
            width: 8.33%;
            background-color: hsl(160,100%,75%);
        }

        a:nth-of-type(10) {
            width: 8.33%;
            background-color: hsl(180,100%,60%);
        }

        a:nth-of-type(11) {
            width: 8.33%;
            background-color: hsl(200,100%,75%);
        }

        a:nth-of-type(12) {
            width: 8.33%;
            background-color: hsl(220,100%,60%);
        }
    </style></head>
<body>
    <aside><a></a><a></a><a></a><a></a><a></a><a></a><b></b><a></a><a></a><a></a><a></a><a></a><a></a></aside>
</body>
</html>

Answer 2

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

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

Answer 3

你可以试试this jsfiddle。元素分布在两个 div 容器中，它们位于同一行或不同的两行，具体取决于页面的宽度。

下面显示的代码说明了问题中设置的这些条件：

在div相同的锚元素有不同的宽度
一行或两行，元素填满整个页面宽度
在一行中，两部分不一定占一半宽度（下例中，第一部分占宽度的55%，第二部分占宽度的45%）

HTML

<div class="container">
    <div class="div1">
    <a></a><a></a><a></a><a></a><a></a><a></a>
    </div><div class="div2">
    <a></a><a></a><a></a><a></a><a></a><a></a>
    </div>
</div>

CSS

div.container {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

div.container > div {
    display: inline-block;
    width: 100%;
}

@media (min-width: 500px) {
    div.container > div.div1 {
        width: 55%;
    }
    div.container > div.div2 {
        width: 45%;
    }
}

div a {
    height: 50px;
    display: inline-block;
    vertical-align: top;
}


/*widths and colors*/

.div1 > a:nth-of-type(1) {
    width: 24%;
    background-color: red;
}

.div1 > a:nth-of-type(2) {
    width: 13%;
    background-color: hsl(20, 100%, 60%);
}

.div1 > a:nth-of-type(3) {
    width: 13%;
    background-color: hsl(40, 100%, 75%);
}

.div1 > a:nth-of-type(4) {
    width: 10%;
    background-color: hsl(60, 100%, 60%);
}

.div1 > a:nth-of-type(5) {
    width: 27%;
    background-color: hsl(80, 100%, 65%);
}

.div1 > a:nth-of-type(6) {
    width: 13%;
    background-color: hsl(100, 100%, 60%);
}

.div2 > a:nth-of-type(1) {
    width: 23%;
    background-color: hsl(260, 100%, 75%);
}

.div2 > a:nth-of-type(2) {
    width: 23%;
    background-color: hsl(140, 100%, 60%);
}

.div2 > a:nth-of-type(3) {
    width: 10%;
    background-color: hsl(160, 100%, 75%);
}

.div2 > a:nth-of-type(4) {
    width: 15%;
    background-color: hsl(180, 100%, 60%);
}

.div2 > a:nth-of-type(5) {
    width: 10%;
    background-color: hsl(200, 100%, 75%);
}

.div2 > a:nth-of-type(6) {
    width: 19%;
    background-color: hsl(220, 100%, 60%);
}

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

How to evenly split one row of divs into two rows at certain browser width

javascript

css

jquery

row

width