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

Question

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

我有一排 8 个 divs（而不是像 divs 那样的链接），它们的宽度不同——它们加起来都是 100%。我已将其设置为当由 600 像素宽度的媒体查询触发时，它分成两个相等的行，每行恰好为 50% 宽度。我通过在 HTML 'divs' 之间插入 <b></b> 标记并使用媒体查询将其设置为 display: block 来完成此操作。

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

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

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

编辑：我需要一个自动完成的解决方案

结果：

期望的结果：

Answer 1

为什么不删除 b 标签并直接这样做，因为您已经定义了每个 a 标签的宽度，只需将它们加倍即可。

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 时，将每个 a 标签的宽度加倍并将触发器设置为 true，这样它就不会执行再次，当宽度大于 500 时，将当前宽度除以 2 并将触发器设置为 false，因此当宽度小于等于 500 时，它再次将宽度加倍。

更新 2

在宽度百分比中加入了Fixed(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 2

如果 200% 对您有用，将溢出设置为隐藏应该会隐藏滚动条。如果我理解正确的话，你也可以在父级上设置这个来隐藏空白space。

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/ 仅适用于 div aside 和一点点 CSS.

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

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

CSS double the width of all elements with media query (or jQuery)

html

javascript

css

jquery

width