Question

我是Stackoverflow的新手，我想知道是否有人可以帮我解决这个问题：

我想在项目中使用不同的块（＆＃34; .item-wrapper ＆＃34;）（＆＃34; .item ＆＃34; ）在里面。但是块内的项目需要可变宽度。

实施例：如果块包含4个项目，则项目的宽度为25％。
如果块包含5个项目，则项目的宽度为20％。
如果块包含6个项目，则项目的宽度需要为16.66 ....％。
如果块包含7个项目，则项目的宽度需要为14.28 ....％。

我希望有人能帮助我。

我这里有一个JSfiddle

jsfiddle.net/carloc/4cjwqpf4/2/

谢谢！

Answer 1

你不需要javascript ... CSS可以为你做。

   .item-wrapper {
      display: table;
      width: 100%;
    }
    .item-wrapper .item {
      display: table-cell;
    }

＆＃13;

.item-wrapper {
  display: table;
  width: 100%;
}
.item-wrapper .item {
  display: table-cell;
  width: auto;
  border: 1px solid red;
  color: red;
  height: 50px;
  padding: 10px;
}
.item-wrapper .item:nth-child(odd) {
  border-color: blue;
  color: blue;
}

＆＃13;

<div class="item-wrapper">
  <!-- 4 items -->
  <div class="item">test</div>
  <div class="item">test</div>
  <div class="item">test</div>
  <div class="item">test</div>
</div>

<div class="item-wrapper">
  <!-- 5 items -->
  <div class="item">test</div>
  <div class="item">test</div>
  <div class="item">test</div>
  <div class="item">test</div>
  <div class="item">test</div>
</div>

<div class="item-wrapper">
  <!-- 6 items -->
  <div class="item">test</div>
  <div class="item">test</div>
  <div class="item">test</div>
  <div class="item">test</div>
  <div class="item">test</div>
  <div class="item">test</div>
</div>

<div class="item-wrapper">
  <!-- 7 items -->
  <div class="item">test</div>
  <div class="item">test</div>
  <div class="item">test</div>
  <div class="item">test</div>
  <div class="item">test</div>
  <div class="item">test</div>
  <div class="item">test</div>
</div>

＆＃13;

Answer 2

我对这个问题的解决方案是：

$( document ).ready(function() 
{
  $(".item-wrapper").each(function()
  {
    c = $(this).children().length;

    $(this).children().each(function(){
        $(this).css("width", (100 / c) + "%");
    }); 
  });
});

循环遍历所有＆＃34; item-wrapper＆＃34;类，然后获取项目包装器的子项（通过使用$（this））。根据item-wrapper拥有的子项数为它们分配宽度值。

通过正确的计算，您可以获得所需的值。这个案例100％除以子女数量

Answer 3

您可以使用CSS以及Javascript：

JS代码：

super == this

CSS：

$( document ).ready(function() {        
    $( ".item-wrapper" ).each(function( index ) {
        var clen=$(this).children().length;     

            $(this).children('div').each(function () {
                $(this).addClass('col'+clen);
            });         

    });      

});

CSS类不以数字开头。：）

Answer 4

我是用JavaScript为你做的： JSFiddle

测试并运作。（您可以通过添加更多div来测试它。）

JavaScript的：

 var divAmount = $('.item-wrapper > .item').length;

    if (divAmount === 4) {
        $('.item').css('width', '25%');
    } else if (divAmount === 5) {
        $('.item').css('width', '20%'); 
    } else if (divAmount === 6) {
        $('.item').css('width', '16.66%'); 
    } else if (divAmount === 7) {
        $('.item').css('width', '14.28%'); 
    };

jQuery - 将类添加到不同数量的div

4 个答案: