我该如何让一个 div 不得不比它的内容更大？

若要创建一个不比其内容更大的 div，请使用值设为 inline-block 的 display 属性。我们这里有一个包含一张图片的 div −

<div class="wrapper">
   <img src="https://tutorialspoint.com/python3/images/python-mini-logo.jpg"
   width="300" alt="Python">
</div>

该 div 使用 inline-block 进行样式化。此 inline-block 将形成一个不比其内容更大的 div −

.wrapper{
   display: inline-block;
   border: 10px solid orange;
}

图片被添加了边框 −

img{
   border: 20px solid white;
}

示例

我们现在看看完整的示例 −

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Example</title>
   <style>
      .wrapper{
         display: inline-block;
         border: 10px solid orange;
      }
      img{
         border: 20px solid white;
      }
   </style>
</head>
<body>
   <h1>Python Course</h1>
   <div class="wrapper">
      <img src="https://tutorialspoint.com/python3/images/python-mini-logo.jpg"
      width="300" alt="Python">
   </div>
</body>
</html>

输出

如果我们不添加上面的显示 inline-block，将看到以下内容，即比其内容更大的一个 div −

更新于： 01-11-2022

87 次浏览

开启您职业生涯

完成本课程以获得认证

开始
广告