CSS 使用媒体查询（或 jQuery）将所有元素的宽度加倍

Question

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

我有一排 8 个不同宽度的 div（而不是表现为 div 的链接）——它们的总和为 100%。我已将其设置为，当由 600 像素宽度的媒体查询触发时，它会分成 两个 相等的行，每行的宽度正好为 50%。我通过在 HTML 'div' 之间插入 <b></b> 标签并使用媒​​体查询将其设置为 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 的容器...

更新： 小提琴按 cmets 调整：https://jsfiddle.net/5cz84od0/6/ 仅适用于 div 周围的 aside 和一点 CSS。

Answer 2

既然你已经定义了每个 a 标签的宽度，为什么不删除 b 标签并这样做，只需将它们加倍。

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

aside a {
  height: 50px;
  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: 16.66%; 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: 16.66%; background-color: hsl(150,100%,60%);}
a:nth-of-type(7) {width: 8.33%; background-color: hsl(260,100%,75%);}
a:nth-of-type(8) {width: 24.99%; background-color: hsl(0,100%,80%);}

@media only screen and (max-width: 500px) {
a:nth-of-type(1) {width: 16.66%; }
a:nth-of-type(2) {width: 33.32%; }
a:nth-of-type(3) {width: 16.66%; }
a:nth-of-type(4) {width: 16.66%; }
a:nth-of-type(5) {width: 16.66%; }
a:nth-of-type(6) {width: 33.32%; }
a:nth-of-type(7) {width: 16.66%; }
a:nth-of-type(8) {width: 49.98%; }
}

<aside><a></a><a></a><a></a><a></a><a></a><a></a><a></a><a></a><a></a><a></a><a></a><a></a></aside>

更新

似乎唯一的方法是通过 jquery，在调整大小操作时，当宽度为 500，将当前宽度除以 2 并将触发器设置为 false，因此当宽度

更新 2

将toFixed(2)添加到宽度百分比，所以它是一个恒定的两位小数，否则它是一个四位小数的宽度百分比，并且在多次调整大小后会随着时间的推移而变化。

var minWidthTriggered = false;
var maxWidthTriggered = false;

$(window).resize(function(){
  if ($(window).width() <= 500 && !minWidthTriggered){	
    minWidthTriggered = true;
    maxWidthTriggered = true;

    $("a").each(function(){
      widthPercentage = $(this).width() / $(this).parent().width() * 100;

      $(this).css({
        'width' : widthPercentage.toFixed(2) * 2 + "%"
      });
    });
  }	
  else if ($(window).width() > 500 && maxWidthTriggered)
  {
    maxWidthTriggered = false;
    minWidthTriggered = false;

    $("a").each(function(){
      widthPercentage = $(this).width() / $(this).parent().width() * 100;

      $(this).css({
        'width' : widthPercentage.toFixed(2) / 2 + "%"
      });
    });
  }
});

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

aside a {
  height: 50px;
  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: 16.66%; 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: 16.66%; background-color: hsl(150,100%,60%);}
a:nth-of-type(7) {width: 8.33%; background-color: hsl(260,100%,75%);}
a:nth-of-type(8) {width: 24.99%; background-color: hsl(0,100%,80%);}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<aside><a></a><a></a><a></a><a></a><a></a><a></a><a></a><a></a></aside>

Answer 3

我不清楚你想要发生什么......但是作为首发，这又如何呢？

https://codepen.io/sheriffderek/pen/a88b66fa934e4abbd38e054a45d3f2ff

标记事物列表......这就是你所拥有的。

<ul class='thing-list'>
  <li class='thing one'>
    <a href='' class='link'>.</a>
  </li>
  <li class='thing two'></li>
  <li class='thing three'></li>
  <li class='thing four'></li>
  <li class='thing five'></li>
  <li class='thing six'></li>
  <li class='thing seven'></li>
  <li class='thing eight'></li>
</ul>

我强烈建议您在 CSS 中使用 Stylus - 但编译后的 CSS 在下面

/* apply a natural box layout model to all elements, but allowing components to change */
html
    box-sizing: border-box
*, *:before, *:after
    box-sizing: inherit

.thing-list
    display: flex
    flex-direction: row
    flex-wrap: wrap
    .thing
        min-height: 90px
        flex-basis: (1/12)*100%
        &.one
            background: hsl(0,100%,75%)
        &.two
            flex-basis: (2/12)*100%
            background: hsl(20,100%,60%)
        &.three
            background: hsl(40,100%,75%)
        &.four
            background: hsl(60,100%,60%)
        &.five
            background: hsl(80,100%,65%)
        &.six
            flex-basis: (2/12)*100%
            background: hsl(150,100%,60%)
        &.seven
            background: hsl(260,100%,75%)
        &.eight
            flex-basis: (3/12)*100%
            background: hsl(0,100%,80%)
        .link
            display: block
            color: inherit
            text-decoration: none
            width: 100%
            min-height: 90px
            // i'd prabably color the link - not the li

    @media (min-width: 600px)
        .thing
            flex-basis: (2/12)*100%
            &.two
                flex-basis: (4/12)*100%
            &.six
                flex-basis: (4/12)*100%
            &.eight
                flex-basis: (6/12)*100%

CSS

/* apply a natural box layout model to all elements, but allowing components to change */
html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
.thing-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.thing-list .thing {
  min-height: 90px;
  -ms-flex-preferred-size: 8.333333333333332%;
      flex-basis: 8.333333333333332%;
}
.thing-list .thing.one {
  background: #ff8080;
}
.thing-list .thing.two {
  -ms-flex-preferred-size: 16.666666666666664%;
      flex-basis: 16.666666666666664%;
  background: #f73;
}
.thing-list .thing.three {
  background: #ffd480;
}
.thing-list .thing.four {
  background: #ff3;
}
.thing-list .thing.five {
  background: #c3ff4d;
}
.thing-list .thing.six {
  -ms-flex-preferred-size: 16.666666666666664%;
      flex-basis: 16.666666666666664%;
  background: #3f9;
}
.thing-list .thing.seven {
  background: #aa80ff;
}
.thing-list .thing.eight {
  -ms-flex-preferred-size: 25%;
      flex-basis: 25%;
  background: #f99;
}
.thing-list .thing .link {
  display: block;
  color: inherit;
  text-decoration: none;
  width: 100%;
  min-height: 90px;
}
@media (min-width: 600px) {
  .thing-list .thing {
    -ms-flex-preferred-size: 16.666666666666664%;
        flex-basis: 16.666666666666664%;
  }
  .thing-list .thing.two {
    -ms-flex-preferred-size: 33.33333333333333%;
        flex-basis: 33.33333333333333%;
  }
  .thing-list .thing.six {
    -ms-flex-preferred-size: 33.33333333333333%;
        flex-basis: 33.33333333333333%;
  }
  .thing-list .thing.eight {
    -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
  }
}