简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Imej tengah jika imej lain tidak kelihatan
P粉038161873
P粉038161873 2024-03-20 10:03:26
0
1
387

Saya cuba membuat UI mudah dalam html.

Jika satu div tidak kelihatan, div lain harus berpusat di sekeliling div lain, tetapi ini tidak berlaku.

Jika tunjukkan semua

Jika 2 div tidak kelihatan

CSS dan HTML saya: 

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

Saya cuba melakukan beberapa perkara limpahan tetapi tiada apa yang berhasil untuk saya. Menukar kedudukan relatif dan kedudukan lain melakukan perkara yang pelik.

Seperti yang anda lihat, ia tidak berpusat. Saya tidak tahu banyak perkara pemusatan dalam css jadi saya menulis di sini xD

P粉038161873
P粉038161873

membalas semua(1)
P粉057869348
P粉0578693482024-03-21 00:07:19 Tingkat 1

Tiada yang salah dengan penanda atau gaya anda; visibility: none 时，您的元素不会从正常文档流中删除。该元素仍然存在，只是不可见。尝试使用 display: none

Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！