Bagaimanakah Saya Boleh Menjajarkan Dua Div Secara Mendatar Tanpa Menggunakan Jadual?

Susan Sarandon
Lepaskan: 2024-11-22 13:37:10
asal
545 orang telah melayarinya

How Can I Horizontally Align Two Divs Without Using Tables?

Penjajaran Mendatar Div

Tugas reka letak biasa ialah menjajarkan dua div secara mendatar, dengan setiap satu mengandungi tajuk dan senarainya sendiri. Walaupun jadual boleh mencapai ini dengan mudah, menggunakan jadual untuk susun atur selalunya tidak diingini. Untuk menjajarkan div secara mendatar tanpa menggunakan jadual, pertimbangkan pendekatan berikut:

Div Terapung dalam Bekas Induk

Apungkan div dalam bekas induk. Terapung membolehkan div diletakkan bersebelahan antara satu sama lain secara mendatar. Pastikan bekas induk digayakan seperti berikut:

.aParent div {
    float: left;
    clear: none;
}
Salin selepas log masuk
  • terapung: kiri: Terapung div ke kiri dalam induk.
  • jelas: tiada: Membenarkan div mengalir di sebelah satu sama lain tanpa membersihkan a baris.

Contoh

<div class="aParent">
    <div>
        <span>source list</span>
        <select size="10">
            <option></option>
            <option></option>
            <option></option>
        </select>
    </div>
    <div>
        <span>destination list</span>
        <select size="10">
            <option></option>
            <option></option>
            <option></option>
        </select>
    </div>
</div>
Salin selepas log masuk

Dengan pendekatan ini, div akan dijajarkan secara mendatar, setiap satu mengandungi tajuk dan senarainya, tanpa memerlukan jadual .

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menjajarkan Dua Div Secara Mendatar Tanpa Menggunakan Jadual?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
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 terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan