#html #css
#HTML #CSS
Вопрос:
Я пытаюсь создать веб-панель мониторинга для своего бота discord. после добавления кнопки в div на скриншоте выше я получил это странное поведение h3, которое нажимает кнопку вправо и изменяет значение h3 влево. Как я могу исправить это так, чтобы h3 располагался по центру над кнопкой, которая должна быть расположена между кнопкой и правой границей div?
.guildBImg { background-repeat: no-repeat; background-size: 100%; border-radius: 20px; background-position: center; width: 100%; height: 100%; } lt;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"gt;lt;/divgt; lt;div style="width: 100%; height: 100%; position: relative; display: flex;"gt; lt;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;" /gt; lt;h3 style="font-size: 16px; font-weight: bold; margin-top: -140px; text-overflow: ellipsis; max-height: 70px; overflow: hidden; margin-left: 30px; display: flexbox; "gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean mlt;/h3gt; lt;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;"gt;Managelt;/buttongt; lt;/divgt; Комментарии:
1. Не удается воспроизвести что-либо из предоставленных вами текущих HTML и CSS.
Ответ №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; } lt;div style="width: 500px; height: 300px"gt; lt;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" /gt; lt;div id="container" style="margin-top: -200px; z-index: 2; position: relative; margin-left: 50px"gt; lt;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; "/gt; lt;div id="text-container" style="margin-left: 100px; padding-top: 15px"gt; lt;h3 style="text-overflow: ellipsis; max-height: 70px; overflow: hidden; margin-left: 30px; display: flexbox; color: white;"gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean mlt;/h3gt; lt;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"gt;Managelt;/buttongt; lt;/divgt; lt;/divgt;