css - Bagaimana untuk menyelesaikan masalah unsur terapung jatuh

Question

Nak capai kesan ni

Tetapi kod semasa ditulis seperti ini

    <p class="main">
     <p class="left"></p>
     <p class="center"></p>
     <p class="right"></p>
    </p>

.main{

    margin: 0 auto;
width: 100%;
height: 100%;
overflow: hidden;

}

.left{
    width: 5rem;
    height: 3rem;
    float: left;
    margin: 2rem;
    background-image: url("/templates/CeHua/images/new01.jpg");

}
.center{
    width: 5rem;
    height: 3rem;
    float: left;
    margin: 2rem;
    background-image: url("/templates/CeHua/images/new02.jpg");
}
.right{
    width: 5rem;
    height: 3rem;
    float: left;
    margin: 2rem;
    background-image: url("/templates/CeHua/images/new03.jpg");
    
}

Sila beritahu saya cara menyelesaikannya

Saya membaca banyak balasan tentang isu lebar Selepas saya menukar lebar, imej latar belakang p tidak dipaparkan sepenuhnya.

Answer 1

Tetapkan lebar dua yang pertama lebih kecil, mungkin kerana lebar melebihi lebar maksimum elemen induk, menyebabkan pemisah baris muncul

Answer 2

Lebar tiga subelemen: 33.333%. Cuba ubah marginnya kepada padding dan peratusan penggunaan.

Answer 3

Sebab 1: Lebar kandungan + margin melebihi lebar elemen induk Adalah disyorkan untuk mencuba menukar lebar
Sebab 2: Semua terapung: kiri, masalah ini cenderung berlaku, biasanya kedua-duanya ditinggalkan. kiri dan kanan di kanan
Semoga Bermanfaat untuk anda

Answer 4

Dalam pengiraan CSS, selalunya 1+1>2 Terdapat banyak sebab yang mungkin (seperti sempadan, ruang baris baharu, dsb.). Cara yang lebih baik untuk menanganinya ialah dengan mengurangkan lebar nod anak.

Masalah imej latar belakang disekat Selepas mengubah suai lebar p, saiz imej latar belakang juga mesti ditetapkan secara serentak (100%), jika tidak ia akan dipaparkan mengikut saiz sebenar imej.

Answer 5

Saiz latar belakang atribut ini: 100% 100%;

Answer 6

Lebar set lebih besar daripada 100%, menyebabkan ia melimpah ke baris seterusnya

Answer 7

Kawal lebar p, saiz latar belakang:mengandungi, diselesaikan. Jika nisbah bidang imej adalah sama dengan p anda, imej itu tidak boleh berubah bentuk.