Apakah kaedah untuk melaksanakan susun atur berbilang lajur dalam css3

Cara melaksanakan susun atur berbilang lajur dalam css3: 1. Gunakan apungan untuk melaksanakan susun atur berbilang lajur 2. Gunakan model kotak sebaris untuk melaksanakan susun atur berbilang lajur 3. Gunakan "display: flex"; susun atur elastik untuk melaksanakan susun atur berbilang lajur ; 4. Gunakan kaedah "display: table" untuk melaksanakan susun atur berbilang lajur.

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

Beberapa cara untuk melaksanakan reka letak berbilang lajur dengan css

Jika Tiga div berikut dipaparkan pada baris yang sama

<div id="parent">
    <div id="box1">1</div>
    <div id="box2">2</div>
    <div id="box3">3</div>
</div>

1: alat apungan Reka Letak Lajur berbilang

Atribut apungan mengawal sama ada dan cara komponen HTML sasaran terapung. Selepas menetapkan sifat ini, objek akan dianggap sebagai komponen blok. Terdapat empat nilai apungan: kiri (terapung ke kiri), Kanan (terapung ke kanan), tiada (tidak terapung), mewarisi (mewarisi nilai elemen induk Set box1, box2 dan box3 untuk terapung ke kiri. Jika elemen adik beradik seterusnya bagi elemen terapung juga ditetapkan ke arah terapung yang sama, ia akan dipaparkan serta-merta selepas elemen baharu.

Selepas menetapkan apungan, elemen akan berpisah daripada aliran dokumen biasa. Elemen induk mereka tidak akan diregangkan, jadi ketinggian #induk ialah 0 pada masa ini.

    #parent>div{
        border:1px solid black;
        float:left;
        width:200px;
        height:200px;
        text-align: center;
 
    }
   #box1{
       background-color:red;
   }
   #box2{
       background-color:yellow;
   }
    #box3 {
        background-color:blue;
    }

Kita juga boleh menetapkan kotak1 dan kotak2 terapung ke kiri dan kotak3 tidak terapung. Memandangkan box1 dan box2 ditetapkan untuk terapung, ia dipisahkan daripada aliran dokumen biasa. Untuk box3, seolah-olah box1 dan box2 tidak wujud di hadapannya Box3 juga akan dipaparkan pada baris ini, tetapi ia akan disekat oleh box1. Menetapkan margin-left:400px box3 boleh menjadikannya kelihatan seperti dipaparkan di belakang box1 dan box2. Pada masa ini, #parent dibuka oleh box3 dan ketinggiannya kini 202px.

    #parent>div{
        border:1px solid black;
        width:200px;
        height:200px;
        text-align: center;
 
    }
    #box1{
       float:left;
        background-color:red;
    }
    #box2{
        float:left;
        background-color:yellow;
    }
    #box3 {
        margin-left:400px;
        background-color:blue;
    }

2: model kotak blok sebaris

Unsur model kotak blok sebaris tidak akan menduduki satu baris, tetapi turut menyokong penentuan lebar dengan lebar dan ketinggian. display:inline-block menjadikan objek sebagai objek sebaris, tetapi kandungan objek dipaparkan sebagai objek blok. Objek sebaris seterusnya akan disusun pada baris yang sama. Biasanya anda perlu menetapkan vertical-align:top untuk menjajarkan bahagian atas.

    #parent>div{
        display:inline-block;
        border:1px solid black;
        width:200px;
        height:200px;
        text-align: center;
    }
    #box1{
        background-color:red;
    }
    #box2{
        background-color:yellow;
    }
    #box3 {
        background-color:blue;
    }

Elemen yang dipaparkan secara mendatar blok sebaris akan mempunyai jurang apabila dipaparkan dalam pemisah baris atau dipisahkan dengan ruang. Jika anda mengalih keluar ruang, jurang akan hilang secara semula jadi, supaya jurang tidak akan dipaparkan.

<div>
    <div>1</div>
<div>2</div>
<div>3</div>
</div>

3: paparan: susun atur fleksibel fleksibel

Tetapkan diaplay:flex bekas #induk bersamaan dengan kotak fleksibel. Div di dalam akan disusun mengikut corak yang ditetapkan oleh arah flex. Fungsi susun atur fleksibel Flex adalah agak berkuasa, yang boleh memberikan fleksibiliti maksimum untuk model kotak untuk melaksanakan susun atur kompleks Mana-mana bekas boleh ditetapkan sebagai susun atur Flex. Atribut arah lentur menentukan arah paksi utama: baris bermaksud susunan mendatar dalam bekas induk, dan arah lentur: lajur bermaksud susunan menegak dalam bekas induk.

    #parent{
        display: flex;
        flex-direction: row;
    }
    #parent>div{
        border:1px solid black;
        width:200px;
        height:200px;
        text-align: center;
    }
    #box1{
        background-color:red;
    }
    #box2{
        background-color:yellow;
    }
    #box3 {
        background-color:blue;
    }

4: paparan: jadual

paparan: jadual Elemen dengan set atribut ini dipaparkan sebagai jadual peringkat blok, serupa dengan .
display:table-cell Elemen dengan set atribut ini akan dipaparkan sebagai sel jadual, serupa dengan dan
Anda boleh menggunakan siri kumpulan baris jadual ini, jadual- header-group, table-footer-group, table-row, dsb. gunakan tag lain untuk melaksanakan reka letak seperti jadual.

#parent{
        display: table;
    }
    #parent>div{
        display:table-cell;
        border:1px solid black;
        width:200px;
        height:200px;
        text-align: center;
    }
    #box1{
        background-color:red;
    }
    #box2{
        background-color:yellow;
    }
    #box3 {
        background-color:blue;
    }

(Mempelajari perkongsian video: tutorial video css, tutorial pengenalan bahagian hadapan web)

Atas ialah kandungan terperinci Apakah kaedah untuk melaksanakan susun atur berbilang lajur dalam css3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!