根据子 div 的总数改变宽度答案

【问题标题】：change width depending on total amount of children div根据子 div 的总数改变宽度
【发布时间】：2015-06-04 11:02:29
【问题描述】：

我有 4 个 divs 和 button 类。有时一个页面可能有 5 个具有该类名的 divs，因此我需要更改它们的宽度以使其适合页面。

这是我的 CSS：

<style>
.button{
   width:25%;
}
@media only screen and (max-device-width: 480px)  { 
  .button{
     width:100%;
  }
}
</style>

这是我的html：

<div id="center">
<div class="button" style=" background: blue; float:left;">test</div>
<div class="button" style=" background: red; float:left;">test</div>
<div class="button" style=" background: purple; float:left;">test</div>
<div class="button" style=" background:orange; float:left;">test</div>
</div>

这是我在 javascript 中的尝试

<script type="text/javascript">
$(document).ready(function() { 
   if($("#center div").length == 4);
       button.style.width = '25%';
   }
   else{
       button.style.width = '20%';
   }
});
</script>

但是这个脚本不起作用。

【问题讨论】：

你在所有发布的答案中都试过了吗？

标签： javascript css responsive-design width

【解决方案1】：

从.button 元素中移除所有浮点数

<div id="center">
<div class="button" style=" background: blue;">test</div>
<div class="button" style=" background: red;">test</div>
<div class="button" style=" background: purple;">test</div>
<div class="button" style=" background: orange;">test</div>
<!-- div class="button" style=" background: green;">test</div -->
</div>

并使用display: table/table-cell 获得等宽的内部元素

#center { display: table; width: 100%; }
.button { display: table-cell; }

@media only screen and (max-width: 480px)  { 
   #center, .button {
      display: block;
   }
}

table-* 值得到广泛支持（甚至在 IE8 上）

codepen 示例：http://codepen.io/anon/pen/MYxMvg
（尝试从最后一个 div 中删除评论）

如果您需要专门设置宽度（或与宽度不同的属性），您可以同时使用 float 和 :nth-last-child 伪类，例如

.button { float: left; }

/* style assigned from the fourth-last element onwards */
.button:nth-last-child(n + 4),
.button:nth-last-child(n + 4) ~ div {
   color: white;
   width: 25%;  
}

/* style assigned from the fifth-last element onwards 
   (override previous rules) */
.button:nth-last-child(n + 5),
.button:nth-last-child(n + 5) ~ div {
   color: yellow;
   width: 20%;  
}

/* style for <= 480px (with higher specificity) */
@media only screen and (max-width: 480px)  { 
   #center .button {
      float: none;
      width: 100%;
   }
}

codepen 示例：http://codepen.io/anon/pen/xbBoPR

【讨论】：

【解决方案2】：

作为一种 JavaScript 解决方案，您可以获取 .button 子代的数量并将其宽度设置为 100% / number-of-chilren。

var divs = $('#center').children('.button');
divs.width(100 / divs.length + '%');

.button { float:left; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="center">
      <div class="button" style="background: blue;">test</div>
      <div class="button" style="background: red;">test</div>
      <div class="button" style="background: purple;">test</div>
      <div class="button" style="background:orange;">test</div>
    </div>

但是，如果灵活的盒子布局是一个选项，您可以通过将display: flex 添加到容器并将flex: 1 添加到子项来获得相同的结果。

#center {
  display: flex;
}

.button {
  flex: 1
}

<div id="center">
  <div class="button" style=" background: blue;">test</div>
  <div class="button" style=" background: red;">test</div>
  <div class="button" style=" background: purple;">test</div>
  <div class="button" style=" background:orange;">test</div>
</div>

由于简洁而省略了供应商前缀。

【讨论】：