适合各种 div 元素，具有各种尺寸，适合整个容器宽度

Question

我在各种浮动 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 弹性框：

.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

查看此 link 以计算您 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）

适合各种 div 元素，具有各种尺寸，适合整个容器宽度

fit various div element, with various size, to entire container width

css

css-float