動態調整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％」，以便連續顯示五個塊。