Rumah >hujung hadapan web >tutorial css >Bagaimana untuk melaksanakan susun atur dua lajur dalam css

Bagaimana untuk melaksanakan susun atur dua lajur dalam css

青灯夜游asal: 2021-07-22 15:33:426139semak imbas

Kaedah: 1. Tetapkan "dislpay:inline-block" pada kedua-dua elemen kotak; margin-left. Dan nilainya lebih besar daripada lebar elemen lebar tetap;

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

1. Apakah itu reka letak dua lajur

Terdapat dua jenis reka letak dua lajur, satu lebar tetap di sebelah kiri dan boleh suai pada sebelah kanan, Satu ialah kedua-dua lajur adalah adaptif (iaitu, lebar kiri ditentukan oleh elemen kanak-kanak, dan bahagian kanan mengisi ruang yang tinggal). Soalan temu bual CSS adalah soalan ujian biasa dan juga kemahiran yang mesti dikuasai oleh jurutera pembangunan bahagian hadapan Kaedah pelaksanaan akan diperkenalkan di bawah.

2. Bagaimana untuk mencapai lebar tetap di sebelah kiri dan pelarasan penyesuaian di sebelah kanan?

1. Double inline-block

Prinsip: Kedua-dua elemen menetapkan dislpay:inline-block, untuk Kepada menghapuskan pengaruh ruang HTML, saiz fon elemen induk perlu ditetapkan kepada 0, dan lebar elemen penyesuaian di sebelah kanan dikira menggunakan fungsi calc. Jika ketinggian kedua-dua elemen adalah berbeza, anda boleh menetapkan vertical-align:top pelarasan untuk elemen.

Kelemahan: Memandangkan elemen induk telah menetapkan saiz fon kepada 0, teks dalam elemen anak tidak akan dipaparkan

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
           *{
               padding: 0;
               margin: 0;
           }
            .box{
                height: 600px;
                width: 100%;
                font-size:0;
            }
            .left{
                display: inline-block;
                width: 100px;
                height: 200px;
                background-color: red;
                vertical-align: top;
                 
            }
            .right{
                display: inline-block;
                width: calc(100% - 100px);
                height: 400px;
                background-color: blue;
                vertical-align: top;
            }
             
        </style>
    </head>
    <body>
        <div class="box">
            <div class="left">
                <span>1234</span>
            </div>
            <div class="right">
                <span>1234</span>
            </div>
        </div>
    </body>
</html>

2. Apungan berganda

Prinsip: Dua elemen ditetapkan untuk terapung, dan lebar elemen penyesuaian di sebelah kanan dikira menggunakan fungsi kalk

Kelemahan : Elemen induk perlu mengosongkan terapung

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            .box{
                height: 600px;
                width: 100%;
 
            }
            .left{
                float: left;
                width: 100px;
                height: 200px;
                background-color: red;
            }
            .right{
                float: left;
                width: calc(100% - 100px);
                height: 400px;
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="left">
                <span>
                    123adadadddddddddddddddddddddddddddddddddddddddd
                </span>
            </div>
            <div class="right"></div>
        </div>
    </body>
</html>

3. Jidar terapung

Prinsip: Elemen lebar tetap di sebelah kiri Terapung, tetapkan nilai jidar kiri elemen penyesuaian kanan menjadi lebih besar daripada lebar elemen lebar tetap

Kelemahan: Elemen induk perlu mengosongkan pelampung

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            .box{
                height: 600px;
                width: 100%;
 
            }
            .left{
                float: left;
                width: 100px;
                height: 200px;
                background-color: red;
            }
            .right{
                margin-left: 100px;
                height: 400px;
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="left">
                <p>1234</p>
            </div>
            <div class="right">
                <p>1234</p>
            </div>
        </div>
    </body>
</html>

4 BFC Terapung

Prinsip. : Elemen induk menetapkan limpahan:tersembunyi, elemen lebar tetap kiri terapung, dan elemen penyesuaian yang betul menetapkan limpahan :auto mencipta BFC

Kelemahan: Jika kandungan elemen kiri melebihi lebar yang ditetapkan, ia akan bertindih dengan elemen kanan

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            .box{
                height: 600px;
                width: 100%;
                overflow: hidden;
            }
            .left{
                float: left;
                width: 100px;
                height: 200px;
                background-color: red;
            }
            .right{
                overflow: auto;
                height: 400px;
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="left">111111111111111111111111</div>
            <div class="right">111111111111111111111111111111111111111111111</div>
        </div>
        <div class="right"></div>
    </body>
</html>

5.margin-kiri mutlak

Prinsip : Elemen induk diposisikan secara relatif, elemen di sebelah kiri diposisikan secara mutlak, dan elemen penyesuaian di sebelah kanan menetapkan margin-kiri kepada nilai yang lebih besar daripada nilai tertentu Lebar elemen lebar

Kelemahan: Elemen induk telah menetapkan kedudukan relatif

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            .box{
                height: 600px;
                width: 100%;
                position: relative;
            }
            .left{
                position: absolute;
                width: 100px;
                height: 200px;
                background-color: red;
            }
            .right{
                margin-left: 100px;
                height: 400px;
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="left"></div>
            <div class="right"></div>
        </div>
    </body>
</html>

6. susun atur fleksibel

Prinsip: Paparan set elemen induk: flex, dan elemen adaptif set flex: 1

Kelemahan: Terdapat isu keserasian dan ia tidak disokong di bawah IE10

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            .box{
                height: 600px;
                width: 100%;
                display: flex;
            }
            .left{
                width: 100px;
                height: 200px;
                background-color: red;
            }
            .right{
                flex: 1;
                height: 400px;
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="left"></div>
            <div class="right"></div>
        </div>
    </body>
</html>

3. Elemen di sebelah kiri dan kanan adalah adaptif

Tegasnya, ini tidak bermakna kedua-dua elemen adalah adaptif Lebar tetap di atas diubah untuk diregangkan oleh elemen kanak-kanak

1. BFC Terapung

Prinsipnya adalah sama seperti di atas, kecuali lebar elemen kiri. ialah Tiada tetapan, disokong oleh elemen anak

2. susun atur jadual

Prinsip: paparan elemen induk:jadual, gunakan div di sekeliling kiri elemen Balut, div ditetapkan kepada paparan:table-cell, width: 0.1% (dijamin lebar minimum), elemen kiri ditetapkan ke margin-kanan dan elemen kanan ditetapkan kepada display:table-cell.

Kelemahan: IE7 dan ke bawah tidak disokong Apabila display:table digunakan, padding tidak sah, atribut ketinggian baris bagi elemen induk tidak sah dan apabila display:table-cell digunakan, margin adalah. tidak sah.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .parent{
                display: table;
                width: 100%;
                 
            }
            .box{
                display: table-cell;
                width: 0.1%;
            }
            .left{
                margin-right: 20px;
                background-color: red;
                height: 200px;
            }   
            .right{
                display: table-cell;
                background-color: blue;
                height: 300px;
            }
        </style>
    </head>
    <body>
        <div class="parent">
            <div class="box">
                <div class="left">126545453dddddddd453453453</div>
            </div>
            <div class="right">12121</div>
        </div>
    </body>
</html>

3. susun atur flex

Prinsip dan kekurangannya adalah sama seperti susun atur flex di atas

4.letak letak grid

Prinsip: Paparan set elemen induk: grid, grid-template-columns:auto 1fr; Atribut ini mentakrifkan lebar lajur , kata kunci automatik menunjukkan bahawa penyemak imbas menentukan panjang fr ialah unit saiz relatif, menunjukkan bahawa ruang yang tinggal dibahagikan sama rata) jurang grid: 20px (jarak baris)

<.>

Kelemahan: Keserasian Prestasi terlalu lemah, IE11 tidak disokong, hanya Google 57 ke atas boleh digunakan

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .parent{
                display:grid;
                grid-template-columns:auto 1fr;
                grid-gap:20px
            } 
            .left{
                background-color: red;
                height: 200px;
            }
            .right{
                height:300px;
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <div class="parent">
            <div class="left">1111111111111111111111111</div>
            <div class="right"></div>
        </div>
    </body>
</html>

(Perkongsian video pembelajaran:

tutorial video css )

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan susun atur dua lajur dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Bagaimana untuk mencapai bentuk hati dalam cssArtikel seterusnya：Bagaimana untuk mencapai bentuk hati dalam css

Artikel berkaitan

Lihat lagi