如何以一定的浏览器宽度将一行div均匀地分成两行答案

【问题标题】：How to evenly split one row of divs into two rows at certain browser width如何以一定的浏览器宽度将一行div均匀地分成两行
【发布时间】：2018-01-13 14:46:46
【问题描述】：

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

https://jsfiddle.net/1vf8wgeu/

我有一排 12 个“div”（实际上是链接，但看起来和行为都像 div）。 12 个 div 中的每一个都有一个颜色和一个以百分比表示的宽度，并且这一行拉伸了 100% 的屏幕宽度。

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

我尝试重新格式化 HTML 并将 white-space: pre 与媒体查询一起使用，但这会导致行/div 没有 100% 拉伸的问题，以及行中间的间隙和媒体查询未激活。

非常感谢任何解决方案。

这里显示的是盒子没有拉伸 100% 宽度的问题

【问题讨论】：

听起来你应该研究 CSS 媒体查询
你有没有看我的问题？
我不太确定您的总体目标是什么，可能是游戏或其他东西，但也许可以使用 flex-basis 尝试这种方法？ stackoverflow.com/questions/31621257/…
不，它是用于广告的，但在某些时候它们太小了，我需要将它包装到第二行，仅此而已。我只是给它们上色以更好地区分它们
基本上，您最初可以分为两行，左浮动。然后当屏幕小于 700px 时，移除左边的浮动。看看jsfiddle.net/1vf8wgeu/4 尝试使用和不使用浮动左侧。我还没有添加媒体查询。

标签： javascript jquery css width row

【解决方案1】：

你可以试试this jsfiddle。元素分布在两个 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%);
}

【讨论】：

我删除了这个答案，因为我认为安迪优雅的答案给出了相同的结果，但当两个部分的宽度不同时，情况并非如此。

【解决方案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

【讨论】：

【解决方案3】：

这是我能想到的最好的。我使用媒体查询更改了所有<a></a> 标签中间的<b></b> 标签。我还更改了样式表中初始 <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>

【讨论】：

忘记了 html 不起作用，上面的内容应该是：.我使用媒体查询来更改所有“A”（锚）标签中间的“B”（粗体）标签。
效果很好！！谢谢！
@Cris - 你没有不同宽度的元素？
@ConnorsFan 还没有，但我决定使用 8.33% 的倍数加起来等于 100% 会更容易，而且效果更好
b {display: block} 方法使它起作用，我在媒体查询中为某些 div 添加了不同的宽度，效果很好