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

Question

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

我有一排 8 个宽度不同的 div(更确切地说是表现得像 div 的链接)——它们加起来都是 100%。我已将其设置为当由 600 像素宽度的媒体查询触发时，它分成 两个 相等的行，每行恰好为 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 相同的大小。啊，我第一次确实把 overflow-x 放在了错误的元素上——当然在溢出的元素上是行不通的!我在想它是 as...

的容器

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