动态调整div的大小取决于内容

Question

我想要有以下情形：作为容器的一节，以及不同的div内。这些是动态创建的。我正在解析一个JSON文件，并且对于我找到的每个人的名字，我必须创建一个带有该人的图片和该图片下的名称的div。所以我的div包含一张图片和一个字符串。我想要做的是将这些div放在连续的部分/容器中。不幸的是，我目前无法使用它，并且垂直显示div而不是水平显示。事实上，我已经注意到每个div都占据了整个空间。因此，我想知道如何以足够的空间来容纳图片和文字的方式来调整div的大小。我不想明确使用像素的数量，因为我觉得这是一个糟糕的设计。任何帮助？我可以尝试使用一些代码，但我使用了敲除来绑定所有信息。

<section id="picturesSection"> 
    <div data-bind="foreach: { data: people, as: 'person'}"> 
     <header> 
      <img width="256" height="256" data-bind="attr:{src: person.imageUrl}"> 
     </header> 
     <footer> 
      <p class="nameEmployeePos" data-bind="text: person.name"></p> 
      <p class="nameEmployeePos" data-bind="text: person.dateOfBirth"></p> 
     </footer> 
    </div> 
</section> 

Answer 1

您可以将“float：left”样式添加到您的div。在这种情况下，宽度将与内容一样多。但是如果你的内容太长，它也可能占据整个页面。在这种情况下，您可以用百分比设置div的宽度，例如“width：20％”，以便连续显示五个块。