简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
如果其他图像不可见，则居中图像
P粉038161873
P粉038161873 2024-03-20 10:03:26
0
1
390

我正在尝试用 html 制作简单的 UI。

如果一个 div 不可见，则其他 div 应该以其他 div 为中心，但这种情况不会发生。

如果全部显示

如果 2 个 div 不可见

我的CSS和HTML：

.playerStats{
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translate(-50%, -50%);
}

.hud {
    width: 300px;
    left: -15px;
    /* potrzebne */
    display: flex;
    position: relative;
    justify-content: space-between;
    transition: all 1s ease;
}



.stat {
    border-radius: 50%;
    max-height: fit-content;
    max-width: fit-content;
    position: relative;
    overflow: hidden;
    padding: 2rem;
    background: rgb(20, 20, 20, 0.3);
    box-shadow: 0px 0px 15px rgb(0, 0, 0);
    transition: all 1s ease;
    transition: visibility 0.2s;
    transition: opacity 0.2s;
}


.hud .stat img {
    width: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: all 1s ease;
    transition: visibility 0.2s;
    transition: opacity 0.2s;
}

.hud .stat .bg {
    height: 100%;
    width: 100%;
    left: 0;
    position: absolute;
    bottom: 0;
    box-shadow: 15px 15px 15px 15px rgb(115, 0, 230);
    transition: all 1s ease;
    transition: visibility 0.2s;
    transition: opacity 0.2s;
}

<body>
    <div class="playerStats">
        <div class="hud">
            <div class="stat" id="hp-stat">
                <div class="bg" id="hp" style="background-color: rgb(115, 0, 230)"></div>
                <img src="res/hp.png">
            </div>
            <div class="stat" id="panc-stat">
                <div class="bg" id="panc" style="background-color: rgb(115, 0, 230)"></div>
                <img src="res/panc.png">
            </div>
            <div class="stat" id="pluca-stat">
                <div class="bg" id="pluca" style="background-color: rgb(115, 0, 230)"></div>
                <img src="res/pluca.png">
            </div>
            <div class="stat" id="glos-stat">
                <div class="bg" id="glos" style="background-color: rgb(115, 0, 230)"></div>
                <img src="res/glossredni.png">
            </div>           
        </div>
    </div>
</body>

我尝试做一些溢出的事情，但对我来说没有任何作用。 改变相对位置和其他位置会产生奇怪的事情。

如您所见，它没有居中。 我不知道 css 中的很多居中内容，所以我在这里写 xD

P粉038161873
P粉038161873

全部回复(1)
P粉057869348
P粉0578693482024-03-21 00:07:19 1 楼

您的标记或样式没有任何问题；设置 visibility: none 时，您的元素不会从正常文档流中删除。该元素仍然存在，只是不可见。尝试使用 display: none 代替。

点赞 +0
添加回复
热门专题
更多>
热门文章
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！