javascript - CSS 使用媒体查询(或 jQuery)将所有元素的宽度加倍

Question

下面我提供了一个jsfiddle:
https://jsfiddle.net/cLvyydax/

我有一行 8 个 div(而不是充当 div 的链接)，它们具有不同的宽度 - 它们加起来都是 100%。我已经将其设置为当由 600px 宽度的媒体查询触发时，它会分成两相等的行，每行的宽度恰好为 50%。我通过插入 <b></b> 来完成此操作HTML 'div' 之间的标签并将其设置为 display: block与媒体查询。

如果每个 div 的宽度相同，我可以使用一个值轻松将宽度设置为双倍。
但是，由于这些 div 的宽度(以百分比为单位)不同，当每个 div 分成两行时，如何自动将其宽度加倍？

我尝试将父/容器元素的宽度设置为 200%，但这会留下水平滚动条和一半的窗口空白。我也尝试了flex方法，但这给我的设置带来了其他问题。

如何使用 CSS 或 Javascript/jQuery 轻松完成此操作？

编辑:我需要一个解决方案来自动完成

结果:

期望的结果:

Answer 1

如果 200% 适合您，则将溢出设置为隐藏应该会隐藏滚动条。如果我正确理解该问题，您还可以在父级上设置此选项以隐藏空格。

aside {
  width:200%;
  overflow-x: hidden;
}

编辑:

aside {
   width:200%;
   box-sizing: border-box;
}
div {
    position:relative;
    box-sizing: border-box;
    max-width: 100%;
    overflow-x:hidden;
    min-height: 120px;
}

https://jsfiddle.net/5cz84od0/4

需要父元素上的 position:relative 和父元素上的 min-height 来强制父元素扩展到与 aside 相同的大小。 啊，我第一次确实把溢出 x 放在了错误的元素上 - 当然，在溢出的元素上是行不通的!我正在考虑它是 as...

的容器

更新: 根据评论调整 fiddle :https://jsfiddle.net/5cz84od0/6/ 仅适用于 aside 周围的 div 和一点 CSS。