根据孩子的总数改变宽度div

Question

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

这是我的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>

但是，此脚本不起作用。

Answer 1

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

为了简洁起见，省略了供应商前缀。

Answer 2

删除.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上也是如此）

有关代码笔的示例： 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%;
   }
}

有关代码笔的示例： http ://codepen.io/anon/pen/xbBoPR

Answer 3

我看不出有一种简单的方法，可以通过普通的CSS做到这一点，但没有hack，但是我已经为您编写了一个可以解决问题的jQuery方法。

有关演示+代码，请参见此处的JSFiddle。

function setDynamicWidths(){
    var num = $( "div.button" ).length;        // Get number of divs
   var width = 100 / num;                     // Calculate width as %   
    $("div.button").css('width',width+'%');   // Set width of divs   
}

因此，您可以调用该方法或将其内容粘贴到$(document).ready(function(){ /* code here */ }); 块。

不要忘记也包括jQuery库。

希望有帮助:)