Question

我在各种浮动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; }

谢谢！

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）

适合各种尺寸的各种div元素到整个容器宽度

1 个答案: