我該如何讓一個 div 不得不比它的內容更大？

若要建立一個不比其內容更大的 div，請使用值設為 inline-block 的 display 屬性。我們這裡有一個包含一張圖片的 div −

<div class="wrapper">
   <img src="https://tutorialspoint.tw/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.tw/python3/images/python-mini-logo.jpg"
      width="300" alt="Python">
   </div>
</body>
</html>

輸出

如果我們不新增上面的顯示 inline-block，將看到以下內容，即比其內容更大的一個 div −

更新於： 01-11-2022

87 次瀏覽

開啟您職業生涯

完成本課程以獲得認證

開始
廣告