Question

我有这个小提琴： https://jsfiddle.net/qa5dr0x8/130/

我动态创建div，所以我不知道我有多少它们，我不知道它们的宽度。我设法将它们放在一行中但是在容器中的最后一个div之后有一个空格。即使我不知道宽度中的任何一个，我想用div填充容器。我很乐意在不使用flex的情况下实现这一目标。有什么建议吗？

<body>
  <div style="widht:30%">
    test text
  </div>
  <div style="width:70%;border:1px solid black;">
    <div style="background-color:red;display:inline-block;">
    a1fsdfsdfsd
    </div>
    <div style="background-color:yellow;display:inline-block;">
    b1dfsd
    </div>f
    <div style="background-color:blue;display:inline-block;">
    c1d
    </div>
  </div>
</body>

Answer 1

您可以使用display: table代替flex作为包装，并使用display:table-cell作为变量div。

  <div style="widht:30%">
    test text
  </div>
  <div style="width:70%;border:1px solid black; display: table">
    <div style="background-color:red;display:table-cell;">
    a1fsdfsdfsd
    </div>
    <div style="background-color:yellow;display:table-cell;">
    b1dfsd
    </div>
    <div style="background-color:blue;display:table-cell;">
    c1d
    </div>
  </div>

https://jsfiddle.net/qa5dr0x8/131/

Answer 2

  <body>
  <div style="width:30%">
    test text
  </div>
  <div style="width:70%;border:1px solid black;display:inline;">
    <div style="background-color:red;display:inline-block;">
    a1fsdfsdfsd
    </div>
    <div style="background-color:yellow;display:inline-block;">
    b1dfsd
    </div>f
    <div style="background-color:blue;display:inline-block;">
    c1d
    </div>
  </div>
</body>

如果你想要所有相同的行没有空间而没有使用flex，那么你可以添加css display：inline;在这个div

<div style="width:70%;border:1px solid black;display:inline;">

并排放置div以填充容器而没有固定宽度？

2 个答案: