Question

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

我有一行8个div（相当于div的链接），宽度不同 - 它们都加起来为100％。我已将其设置为当由600px宽度的媒体查询触发时，它会分成两个相等的行，每行的宽度恰好为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放在了错误的元素上 - 当然是溢出的元素不会起作用！我在考虑它是a s ...

的容器

更新：根据评论调整小提琴：https://jsfiddle.net/5cz84od0/6/ 仅适用于div aside以及一点CSS。

Answer 2

为什么不删除b标签，只是这样做，因为你已经定义了每个标签的宽度，只需要加倍。

`Customer Rate`+ `Diff% from Base`+ `Days in Unit`+ `Rec New Price`+ `Rec Rate Chg`+ `Last Rate Change %` + `Last Rate Change Amt`

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

<强>更新

似乎唯一的方法就是通过jquery，在调整大小动作时，当宽度为＆lt; = 500时，将每个标签的宽度加倍并将触发器设置为true，这样当宽度不再时，它会再次执行是> 500，将当前宽度除以2并将触发器设置为false，这样当宽度<= 500时，它再次将宽度加倍。

更新2

添加到固定（2）到宽度百分比，所以它是一个常数小数位，否则它是一个四位小数的宽度百分比，它会在几次调整大小后超时。

<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>

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

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>

我强烈建议您使用Stylus作为CSS - 但编译的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）加倍所有元素的宽度

3 个答案: