代码之家 › 专栏 › 技术社区 › Cris

CSS使用media query(或jQuery)将所有元素的宽度增加一倍

width css html jquery javascript

Cris · 技术社区 · 7 年前

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

二行数相等,每行宽度正好为50%。我通过插入 <b></b> 标记并将其设置为 display: block

如果每个div的宽度相同,我可以轻松地将宽度设置为一个值的两倍。

flex 方法,但这会给我的设置带来其他问题。

如何使用CSS或Javascript/jQuery轻松做到这一点?

编辑:我需要一个解决方案,让它自动完成

结果:

3 回复 | 直到 7 年前

Erin Halbmaier 7 年前

如果“溢出”设置为“隐藏”,则应隐藏滚动条,否则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 啊,我第一次把溢出-x放在了错误的元素上——当然,在溢出的元素上是行不通的!我在想它是 a s

更新: 根据评论调整小提琴: https://jsfiddle.net/5cz84od0/6/ div 围绕

Mindless 7 年前

为什么不删除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>

似乎唯一的方法是在宽度为<=500,将每个标记的宽度增加一倍,并将触发器设置为true,以便在宽度为>500,将当前宽度除以2,并将触发器设置为false,因此当宽度为<=500,宽度又增加了一倍。

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

sheriffderek 7 年前

我不清楚你想要发生什么……但作为首发,这件事怎么办?

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>

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