css - 适合各种尺寸的各种div元素，以适应整个容器宽度

Question

我在各种 float 的 div 元素中有一个 div 容器:我想要一些宽度较大的(大)，其他宽度较小的(小)；同时，它们都应该适合整个容器的宽度。 small、big 和 total 元素的数量是通过 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; }

谢谢!

Answer 1

选项 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)