繁体   English   中英

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

change width depending on total amount of children div

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我有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>

但是,此脚本不起作用。

3 个回复

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

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

删除.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

我看不出有一种简单的方法,可以通过普通的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库。

希望有帮助:)

1 根据设备更改 div 的宽度

我想使用 css 添加效果,以便 div 的宽度为 500px,但前提是用户在计算机上。 如果用户使用的是手机、平板电脑、iPad 等,它将具有预定义的宽度。 我将如何做到这一点? ...

3 根据其宽度更改DIV背景颜色

我想基于它的CSS属性width值,使用jQuery动态修改&lt;div&gt;的背景色。 该用法用于某种形式的彩色编码仪表,该仪表指示设备在特定类别(有5个)中的表现(或不佳),然后有一个“总体”类别,该类别会产生总得分,基于在一点数学上(将所有5加在一起,然后将答案除以5)。 ...

4 如何根据div宽度更改按钮的大小

我想做的是将按钮大小设为div width 35% 。 我将动态元素添加到div中,并在JavaScript中添加属性。 所以这是我的.js文件中的div: 然后我创建元素并以这种方式添加: 然后我在index.php中进行下一步 所以这是我尝试的: 最后是C ...

5 如何根据px的数量更改div的宽度。

我决定使用Javascript和HTML创建一个简单的视频游戏。 我的问题是,当我的角色消耗健康药水时,我的健康棒(div)不会上升。 当前的健康栏看起来像这样: 当我点击消耗药水按钮时,我希望酒吧的宽度增加到70px,140px,210px,最后每次增加280px。 不幸的是,我 ...

6 根据菜单项的数量更改菜单项的宽度

使用Joomla,我有4个菜单项。 其中之一是可选的。 如果我要取消发布此菜单项,则应增加其他菜单项的宽度,但只能在视口最小宽度980px处。 菜单的ID为#menu,我要更改的元素宽度为#menu li。 可选菜单项具有.optMenuitem作为其类名。 对于四个菜单项,宽度应为2 ...

7 CSS-根据所包含文本的宽度更改DIV的宽度

最近,我发现了这个漂亮的示例,用于实现按钮的某种材质设计。 每个按钮由几个类组成,因此只需修改其中一个即可对其进行自定义。 我的问题是,我希望按钮更改其宽度以及它们包含的文本。 简而言之,以这种方式创建“按钮”: 我需要父div宽度(具有“ button”和“ flat”类 ...

8 使用jQuery计算Children的总宽度

我试过找到一个可以理解的答案,但放弃了。 为了在横向网站 (例如thehorizo​​ntalway.com )上拥有dymnamic内容(如博客文章和图片),你必须为像素中的BODY设置一个固定的宽度,对吧? 因为你在其中使用浮动元素,否则会破坏和包裹页面,具体取决于浏览器的宽度。 ...

10 DIV问题的总宽度

我有一个DIV部分,希望在各种情况下将其用作“组件”。 对于“组件”,我的意思是它将被自动包含在无法预见的HTML页面的某些位置。 DIV部分的必要行为是其宽度应始终为100%,这意味着它应完全填充父对象。 由于DIV的总宽度是内部宽度+填充+边距的总和,因此出现了问题。 我在DIV ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM