如何用html制作“包装纸”？

我非常习惯于在WPF中工作，但我最近开始用html构建网站

我想列出一些东西，比如说，每个都包含一个图片和一个html描述，它们的行为就像是在WPF包装中一样

通过这样做，我想我几乎做到了：

<ul id="listofthings">
 <li>
  <div class="card">
   <div class="image" id="pic1">
      </div>
      <div class="description">
       <h2><a href="">Dog</a></h2>
       <p>The dog is a domesticated form of the gray wolf, a member of the Canidae family.</p>
       <a href="">Read more.</a>
      </div>
     </div>
 </li>
 <li>
  <div class="card">
   <div class="image" id="pic1">
      </div>
      <div class="description">
       <h2><a href="">Cat</a></h2>
       <p>The cat, also known as the domestic cat or housecat, is a small furry domesticated carnivorous mammal.</p>
       <a href="">Read more.</a>
      </div>
     </div>
 </li>

<!--...etc. etc.-->

</ul>

因此，项目已设置为向左浮动，这工作正常。但我也希望整个列表有一个坚实的灰色背景。目前，它仅部分显示灰色背景。我想，我希望这份清单能延伸到它的项目周围，我想是吧？换句话说，因为父ul有灰色背景，所以我希望它的子ul位于灰色背景之上。我该怎么做

---

TIA。

浮动会弄乱布局，因此请改用显示：内联块

#listofthings li{
 width: 300px;
 display: inline-block;
}

#listofthings li{
 width: 300px;
 display: inline-block;
}