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

Question

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

我有一排8格的div（相当于div的链接），它们的宽度不同-它们的总和为100％。 我已经对其进行了设置，以便在由宽度为600px的媒体查询触发时，它将分为两行，每行的宽度恰好为50％。 通过在HTML'divs'之间插入<b></b>标记并将其设置为display: block媒体查询，可以做到这一点。

如果每个div的宽度相同，我可以轻松地将宽度设置为一个值的两倍。
但是，由于这些div的宽度不同（以百分比表示），当每个div分成两行时，如何自动将其宽度加倍？

我尝试通过将parent / container元素的宽度设置为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放在了错误的元素上—当然，在出现溢出的元素上是行不通的！ 我在想这是对的容器a小号...

更新：小提琴根据评论进行了调整： https ://jsfiddle.net/5cz84od0/6/只能在div周围aside一点CSS。

Answer 2

为什么不删除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进行调整大小操作，当width <= 500时，将每个标记的宽度加倍，并将触发器设置为true，以便当width> 500时不再执行此操作，将当前宽度除以2，并将触发器设置为false，以便当宽度<= 500时，它将再次使宽度加倍。

更新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%;
  }
}