Bagaimana untuk menghalang div daripada membungkus dalam css

Dalam reka bentuk web, terdapat senario di mana satu siri elemen perlu disusun secara mendatar dan bukannya menegak. Sebagai contoh, apabila membuat jadual atau paparan gambar, elemen selalunya perlu disusun secara mendatar Pada masa ini, kita perlu menggunakan div css untuk memaparkan tanpa membungkus.

1. Gunakan display:inline-block

Kita boleh menggunakan display:inline-block property dalam CSS untuk mencapai susunan mendatar elemen div. Selepas menetapkan atribut paparan elemen div kepada blok sebaris, elemen div boleh disusun dalam susunan yang sama dari kiri ke kanan seperti teks. Walau bagaimanapun, perlu diambil perhatian bahawa kaedah ini memerlukan tetapan seragam saiz fon:0 pada elemen induk, jika tidak, jurang akan muncul dalam elemen div.

Contoh kod:

<style>
    .parent {
        font-size: 0; /* 必须设置为0，否则会出现空隙 */
    }
    .child {
        display: inline-block;
        width: 100px;
        height: 100px;
        background-color: red;
        margin-right: 10px;
    }
</style>
<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

2 Gunakan float:left

Cara lain untuk mencapai paparan div css tanpa pembalut baris ialah menggunakan atribut float:left. Selepas menetapkan atribut apungan elemen div ke kiri, elemen div boleh disusun secara mendatar. Walau bagaimanapun, perlu diingatkan bahawa kaedah ini memerlukan mengosongkan apungan pada elemen induk, jika tidak, ketinggian elemen induk akan runtuh.

Contoh kod:

<style>
    .parent {
        overflow: hidden; /* 清除浮动 */
    }
    .child {
        float: left;
        width: 100px;
        height: 100px;
        background-color: red;
        margin-right: 10px;
    }
</style>
<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

3 Gunakan display:flex

Dalam CSS3, atribut display:flex ditambah, yang boleh merealisasikan susunan mendatar div dengan mudah. unsur . Tetapkan atribut paparan elemen induk kepada flex, dan elemen anak boleh diatur secara automatik, dan susunan elemen anak boleh dilaraskan, yang sangat fleksibel.

Contoh kod:

<style>
    .parent {
        display: flex;
    }
    .child {
        width: 100px;
        height: 100px;
        background-color: red;
        margin-right: 10px;
    }
</style>
<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

4 Ringkasan

Ringkasnya, kita boleh menggunakan display:inline-block, float:left, display:flex dan CSS lain. atribut melaksanakan paparan css div tanpa pembalut. Antaranya, display:inline-block selalunya digunakan untuk serasi dengan pelayar versi rendah, manakala float:left sangat stabil dari segi keserasian. Display:flex ialah kaedah yang paling popular dan boleh memainkan peranan yang sangat fleksibel dalam menangani pelbagai susun atur yang kompleks.

Atas ialah kandungan terperinci Bagaimana untuk menghalang div daripada membungkus dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!