Bagaimana untuk Menjajarkan Pusat Bekas dan Elemen Kanak-Kanak Jajaran Kiri dengan Lajur Responsif?

Susan Sarandon
Lepaskan: 2024-11-02 14:20:30
asal
267 orang telah melayarinya

How to Center Align Container and Left Align Child Elements with Responsive Columns?

Center Align Container and Left Align Child Elements

Soalan anda bertujuan untuk memaparkan nombor dinamik imej pada halaman web yang berpusat dan dijajarkan dalam satu baris tanpa mengubah saiz. Elemen kanak-kanak harus dikumpulkan bersama dan dijarakkan.

Untuk mencapai matlamat ini, anda boleh memanfaatkan pertanyaan media dalam CSS. Kod yang disediakan menunjukkan cara:

<code class="css">body {
    margin: 10px 0;
}
.outer {
    text-align: center;
}
.inner {
    font-size: 0; /* fix for inline gaps */
    display: inline-block;
    text-align: left;
}
.item {
    font-size: 16px; /* reset font size */
    display: inline-block;
    margin: 5px; /* gutter */
}
.item img {
    vertical-align: top;
}
@media (max-width: 551px) { /* ((100+5+5)x5)+1 */
    .inner {
        width: 440px; /* (100+5+5)x4 */
    }
}
@media (max-width: 441px) {
    .inner {
        width: 330px;
    }
}
@media (max-width: 331px) {
    .inner {
        width: 220px;
    }
}
@media (max-width: 221px) {
    .inner {
        width: 110px;
    }
}</code>
Salin selepas log masuk

Kod ini termasuk pertanyaan media khusus untuk saiz skrin yang berbeza untuk memastikan lebar div dalam dilaraskan secara dinamik. Ambil perhatian bahawa anda mungkin perlu melaraskan saiz longkang (margin) berdasarkan keperluan anda.

Atas ialah kandungan terperinci Bagaimana untuk Menjajarkan Pusat Bekas dan Elemen Kanak-Kanak Jajaran Kiri dengan Lajur Responsif?. 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