Question

在我的应用程序中，用户可以输入文本并单击按钮将新的“span”附加到包含其输入文本的DOM（在容器内）。我希望这些跨度具有适合给定用户输入文本所需的宽度（您可以假设用户不会输入比容器宽度更长的东西）。我还希望容器能够连续安装尽可能多的跨度;如果跨度需要的空间比当前行剩余的空间多 - ＆gt;转到下面的行（参见图片的最后两行）。

我需要将哪种CSS添加到我的容器以及其中的跨度以实现下面的组织？

请注意：此容器的宽度是固定的，但是根据需要增加高度以适应填充新文本的跨度

kubernetes/openshift

Answer 1

根据你的模型，你可以通过两种方式完成你的任务：

使用flex CSS3属性
使用CSS3属性width auto并在span类中向左浮动。

让span class =＆＃34; class-name＆＃34;

.class-name {
  display: inline-block;
  width: auto;
  float: left;
}

在此span类中，您可以根据需要添加更多属性。

Answer 2

使用CSS3 flex属性执行此操作：

.container {
  display: flex;
  border: 1px solid red;
  width: 20rem;
  flex-wrap: wrap; /* otherwise it will try to fit everything on one line */
  justify-content: space-between; /* alternatives are space-evenly or space-around*/
}

看到这个pen，有了flex，你可以更好地控制容器的宽度如何使用，浮动解决方案你无法证明内容的合理性，它将全部贴在左边，留下未使用的空间。

CSS中的动态响应网格样式容器

2 个答案: