添加元素后如何让盒子变大？ （CSS）

Question

我是一名 Django Web 开发人员，并且是 html 和 CSS 的初学者。 我在 html 页面中有一个框，我用它作为食物列表。我希望当添加元素（新食物）时它能获得更高的高度。谢谢。

我搜索了谷歌，但没有找到任何东西。

Answer 1

您应该详细说明问题以使其更清楚。 无论如何，只需尝试一下或根据您的要求进行修改，然后检查这是否可以解决您的问题。

为了动态添加食物，您必须使用 Js，否则只需使用 HTML、CSS，您的食物数量将被预定义。

//--------CSS------------

#food-list {
      width: 300px;
      border: 1px solid #ccc;
      padding: 10px;
    }

//--------HTML---------- 

<div id="food-list">
    <!-- Your food items will be dynamically added here -->
  </div>
  <button onclick="addFood()">Add Food</button>

//----------JS-------------

function addFood() {
      var foodList = document.getElementById('food-list');
      var newFood = document.createElement('div');
      newFood.textContent = 'New Food';
      foodList.appendChild(newFood);
    }

根据您的要求进行修改