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

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

Answer 3

我无法通过简单的CSS看到一种显而易见的方法来实现这一点，但是我已经写了一个jQuery方法，应该可以解决这个问题。

See the JSFiddle here for demo + code.

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

希望有所帮助：）

根据儿童div的总量改变宽度

3 个答案: