Bagaimanakah saya boleh membuat susun atur mendatar tiga lajur dengan CSS sahaja, tanpa mengubah suai struktur HTML?

Reka Letak 3 Lajur dengan CSS Sahaja

Dalam HTML, anda mempunyai reka letak dengan tiga lajur yang disusun secara menegak:

<div class="container">
   <div class="column-center">Column center</div>
   <div class="column-left">Column left</div>
   <div class="column-right">Column right</div>
</div>

Anda ingin menyusun lajur ini secara mendatar, serupa dengan grid di bawah, tanpa mengubah struktur HTML:

----------------------------------------------------
|              |                   |               |
| Column left  |   Column center   | Column right  |
|              |                   |               |
----------------------------------------------------

Untuk mencapai ini, gunakan sifat CSS:

.column-left{ float: left; width: 33.333%; }
.column-right{ float: right; width: 33.333%; }
.column-center{ display: inline-block; width: 33.333%; }

Lihat tunjuk cara langsung di sini.

Untuk sistem grid yang lebih fleksibel, buat sistem grid dengan bilangan lajur yang lebih besar:

.column {
    float: left;
    position: relative;
    width: 20%;
    
    /*for demo purposes only */
    background: #f2f2f2;
    border: 1px solid #e6e6e6;
    box-sizing: border-box;
}

.column-offset-1 {
    left: 20%;
}
.column-offset-2 {
    left: 40%;
}
.column-offset-3 {
    left: 60%;
}
.column-offset-4 {
    left: 80%;
}

.column-inset-1 {
    left: -20%;
}
.column-inset-2 {
    left: -40%;
}
.column-inset-3 {
    left: -60%;
}
.column-inset-4 {
    left: -80%;
}

Dan gunakan HTML seperti ini:

<div class="container">
   <div class="column column-one column-offset-2">Column one</div>
   <div class="column column-two column-inset-1">Column two</div>
   <div class="column column-three column-offset-1">Column three</div>
   <div class="column column-four column-inset-2">Column four</div>
   <div class="column column-five">Column five</div>
</div>

Atas ialah kandungan terperinci Bagaimanakah saya boleh membuat susun atur mendatar tiga lajur dengan CSS sahaja, tanpa mengubah suai struktur HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!