h3html下方的空框

頁面截圖

我正在嘗試為我的不和諧機器人制作一個網路儀表板。在上面的螢屏截圖中將按鈕添加到 div 后，我得到了 h3 的這種奇怪行為，它將按鈕推到了右側，并將 h3 值推到了左側。我該如何解決這個問題，使 h3 位于按鈕上方的中心，按鈕應該位于想象和正確的 div 邊界之間？

.guildBImg {
  background-repeat: no-repeat;
  background-size: 100%;
  border-radius: 20px;
  background-position: center;
  width: 100%;
  height: 100%;
}

<div style="background-image: url('https://cdn.discordapp.com/icons/623189087225905153/91396f1f4ea9ed9865112db0c827682a.webp?size=96'); filter: blur(5px) brightness(50%); -webkit-filter: blur(5px) brightness(50%); float: left;" class="guildBImg"></div>
<div style="width: 100%; height: 100%; position: relative; display: flex;">
  <img src="https://cdn.discordapp.com/icons/623189087225905153/91396f1f4ea9ed9865112db0c827682a.webp?size=128" style="width: 100px; height: 100px; border-radius: 50%; border-width: 2px; border-color: #ffffff; border-style: solid; float: left; margin-top: -140px;"
  />
  <h3 style="font-size: 16px; font-weight: bold; margin-top: -140px; text-overflow: ellipsis; max-height: 70px; overflow: hidden; margin-left: 30px; display: flexbox; ">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean m</h3>
  <button style="background-color: #5865f2; width: 240px; height: 35px; border-radius: 5px; border-width: 0px; border-color: #ffffff; border-style: solid; color: #ffffff; display: flexbox; font-size: 16px; font-weight: bold; margin-top: -55px;">Manage</button>
</div>

uj5u.com熱心網友回復：

嘗試這個：

.guildBImg {
background-repeat: no-repeat; 
background-size: 100%; 
border-radius: 20px; 
background-position: center;
width: 100%;
height: 100%;
}

h3{
  margin:0;
  padding: 0;
  overflow: hidden;
}

    <div style="width: 500px; height: 300px">
        <img src="https://cdn.discordapp.com/icons/623189087225905153/91396f1f4ea9ed9865112db0c827682a.webp?size=512');" style="filter: blur(5px) brightness(50%); object-fit: cover; -webkit-filter: blur(5px) brightness(50%); height:400px object-fit" class="guildBImg" />
      <div id="container" style="margin-top: -200px; z-index: 2; position: relative; margin-left: 50px">
        <img src="https://cdn.discordapp.com/icons/623189087225905153/91396f1f4ea9ed9865112db0c827682a.webp?size=128" style="width: 100px; height: 100px; border-radius: 50%; border-width: 2px; border-color: #ffffff; border-style: solid; float: left; "/>
        <div id="text-container" style="margin-left: 100px; padding-top: 15px">
          <h3 style="text-overflow: ellipsis; max-height: 70px; overflow: hidden; margin-left: 30px; display: flexbox; color: white;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean m</h3>
          <button style="margin-left: 25px; background-color: #5865f2; width: 240px; height: 35px; border-radius: 5px; border-width: 0px; border-color: #ffffff; border-style: solid; color: #ffffff; display: flexbox; font-size: 16px; font-weight: bold; margin-top: 5px">Manage</button>
        </div>
    </div>      

標籤：html css

上一篇：擺脫懸停時的邊界

下一篇：如何在Laravel微風中的tailwind-css中水平對齊影像