将不同尺寸的div元素与整个容器宽度相匹配。
将不同尺寸的div元素与整个容器宽度相匹配。
提问于 2016-03-24 10:33:02
我在各种浮动div元素中有一个div容器:我希望有一些宽度大(大)的，另一些宽小(小)；同时，它们都应该适合整个容器的宽度。小元素、大元素和总元素的数量是通过javascript动态设置的，因此我不能在css中使用固定的百分比宽度。
在一些GUI开发人员软件中，有可扩展的值来实现这一目标。
示例(静态) html：
<div class="container">
<div class="small">small</div>
<div class="big">BIG</div>
<div class="big">BIG</div>
<div class="big">BIG</div>
<div class="small">small</div>
</div>示例css：
.container {
display: block;
overflow: hidden;
width: 100%; }
.big , .small {
float: left; }谢谢!
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-03-24 10:56:13
选项1: CSS Flex-box
为此，您可以使用CSS flex-box：
.container {
display:flex;
flex-wrap:nowrap;
}
.big {
flex-grow:2;
background-color:red;
}
.small {
flex-grow:1;
background-color:yellow;
}<div class="container">
<div class="small">small</div>
<div class="big">BIG</div>
<div class="big">BIG</div>
<div class="big">BIG</div>
<div class="small">small</div>
</div>
选项2: JavaScript
您可以创建一个计算所需总宽度的JS方法，并与之相比设置css样式。
理论：
Small = 1 width
Big = 2 width查看此链接以计数div：https://api.jquery.com/length/中的项
4x big = 8 width
5x small = 5 width
total width = 13 width
width per small in % = 100 / 13
width per large in % = 100 / 13 * 2把宽度定下来(如。(用JQuery)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36198086
复制相关文章
相似问题
腾讯云开发者
