h3 html下方的空框

Question

页面截图

我正试图为我的discord机器人制作一个网络仪表板。在上面的屏幕截图中将按钮添加到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>

Answer 1

试试这个：

.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>