Melaksanakan susun atur responsif: CSS melaksanakan lebar yang sama dan susunan elemen penyesuaian

Artikel ini menerangkan cara menggunakan CSS untuk melaksanakan susun atur responsif yang membolehkan dua elemen disusun secara mendatar dan mengekalkan lebar yang sama seperti yang dibenarkan oleh bekas. Apabila bekas tidak cukup luas untuk memegang dua elemen, mereka akan diatur secara menegak. Kami akan meneroka bagaimana untuk mencapai kesan ini menggunakan harta Flex-Wrap Flexbox, dan memberikan contoh dan penjelasan kod terperinci.

Gunakan Flexbox untuk melaksanakan susunan lebar yang sama dengan responsif

Flexbox adalah modul susun atur CSS yang kuat yang membolehkan kita dengan mudah mengawal susunan, penjajaran dan saiz elemen. Dengan menggabungkan atribut Flex-Wrap, kita dapat mencapai kesan pembungkus unsur-unsur automatik dalam bekas, dengan itu mencapai susun atur responsif.

Idea Teras:

1. Tetapkan bekas sebagai bekas Flexbox.
2. Tetapkan flex-wrap: bungkus; Atribut untuk membolehkan unsur -unsur kanak -kanak membungkus apabila lebar bekas tidak mencukupi.
3. Kawal bagaimana unsur -unsur kanak -kanak diatur dengan menetapkan lebarnya.

Contoh kod:

 <div class="wrapper">
  <img src="https://unsplash.it/200/200" alt="contoh imej">
  <p> lorem ipsum hanyalah teks dummy industri percetakan dan jenis. Lorem Ipsum telah menjadi teks dummy standard industri sejak tahun 1500 -an, ketika pencetak yang tidak diketahui mengambil galley jenis dan bergegas untuk membuat buku spesimen jenis. </p>
</div>

 .Wrapper {
  Paparan: Flex;
  Flex-Wrap: Bungkus;
  lebar: 400px; /* Lebar kontena, boleh diselaraskan mengikut keadaan sebenar*/
  Sempadan: 1px merah pepejal; /*Senang diperhatikan*/
}

.wrapper img {
  Lebar: 200px; /* lebar gambar*/
  ketinggian: auto;
}

.wrapper p {
  Lebar: 200px; /* Lebar perenggan*/
  ketinggian: auto;
  Margin: 0; / * Margin lalai yang jelas */
  Padding: 10px;
}

Penjelasan kod:

• .Wrapper: Paparan: Flex menetapkan elemen Div sebagai bekas Flexbox. Flex-Wrap: Bungkus membolehkan unsur-unsur kanak-kanak membungkus apabila lebarnya melebihi lebar bekas. Lebar: 400px mentakrifkan lebar bekas.
• .Wrapper IMG: Lebar: 200px mentakrifkan lebar imej supaya ia menduduki separuh lebar bekas. Ketinggian: Auto mengekalkan nisbah aspek imej.
• .Wrapper P: Lebar: 200px mentakrifkan lebar perenggan supaya ia menduduki separuh lebar bekas. Ketinggian: Auto menjadikan ketinggian perenggan menyesuaikan diri dengan kandungan. Margin: 0 membersihkan margin lalai perenggan untuk mengelakkan mempengaruhi susun atur. Padding: 10px meningkatkan ruang di dalam perenggan untuk meningkatkan kebolehbacaan.

Kesan Operasi:

Apabila lebar kontena lebih besar daripada atau sama dengan 400px, imej dan perenggan akan diatur secara mendatar, masing -masing menduduki separuh lebar. Apabila lebar bekas adalah kurang daripada 400px, perenggan akan secara automatik membungkus ke bahagian bawah imej dan disusun secara menegak.

Perkara yang perlu diperhatikan:

• Pastikan bekas itu cukup luas untuk menampung sekurang -kurangnya satu elemen kanak -kanak, jika tidak, susun atur mungkin merosakkan.
• Anda boleh menyesuaikan lebar elemen kanak -kanak dan lebar bekas mengikut keperluan sebenar untuk mencapai kesan susun atur yang terbaik.
• Anda boleh menggunakan pertanyaan media untuk menyesuaikan lebar bekas dan elemen kanak -kanak mengikut saiz skrin yang berbeza, yang membolehkan kawalan responsif yang lebih berbutir.

Contoh: Menggunakan pertanyaan media untuk kawalan responsif yang lebih berbutir

 .Wrapper {
  Paparan: Flex;
  Flex-Wrap: Bungkus;
  lebar: 400px;
  Sempadan: 1px merah pepejal;
}

.wrapper img {
  Lebar: 200px;
  ketinggian: auto;
}

.wrapper p {
  Lebar: 200px;
  ketinggian: auto;
  Margin: 0;
  Padding: 10px;
}

/* Apabila lebar skrin kurang dari 600px, biarkan gambar dan perenggan menduduki 100% lebar*/
@media (max-width: 600px) {
  .Wrapper {
    Lebar: 100%; / * Lebar kontena menduduki 100% skrin */
  }
  .wrapper img {
    Lebar: 100%; / * Lebar imej menduduki 100% bekas */
  }
  .wrapper p {
    Lebar: 100%; / * Lebar perenggan menduduki 100% bekas */
  }
}

Dalam contoh ini, kami menggunakan pertanyaan media @media (max-width: 600px) untuk menentukan gaya apabila lebar skrin kurang daripada 600px. Apabila lebar skrin kurang daripada 600px, lebar bekas dan sub-unsur (gambar dan perenggan) ditetapkan kepada 100% untuk mencapai susunan menegak.

Meringkaskan:

Dengan menggabungkan pertanyaan Flex-Flex-Wrap Property dan Media, kami dapat dengan mudah melaksanakan susun atur responsif supaya unsur-unsur disusun secara optimum pada saiz skrin yang berbeza. Kaedah ini mudah difahami dan sangat fleksibel, dan dapat memenuhi pelbagai keperluan susun atur yang kompleks. Menguasai kemahiran ini adalah penting untuk pemaju depan.

Atas ialah kandungan terperinci Melaksanakan susun atur responsif: CSS melaksanakan lebar yang sama dan susunan elemen penyesuaian. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!