Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk Mencapai Penjajaran Div Mendatar dalam CSS?

Bagaimana untuk Mencapai Penjajaran Div Mendatar dalam CSS?

DDD
DDDasal
2024-11-11 01:33:02611semak imbas

How to Achieve Horizontal Div Alignment in CSS?

Penjajaran Div Mendatar dalam CSS

Apabila bekerja dengan CSS, menjajarkan div secara mendatar dalam bekas boleh memberikan cabaran. Secara lalai, div terapung akan disusun secara menegak jika lebar gabungannya melebihi lebar bekas induk, walaupun ketinggian bekas membenarkan susunan mendatar.

Untuk mencapai penjajaran mendatar yang diingini, kita boleh menggunakan div dalam dalam bekas yang cukup lebar untuk menampung semua div terapung.

#container {
  background-color: red;
  overflow: hidden;
  width: 200px;
}

#inner {
  overflow: hidden;
  width: 2000px;
}

.child {
  float: left;
  background-color: blue;
  width: 50px;
  height: 50px;
}
<div>

Dalam penyelesaian ini, div #dalaman mempunyai lebar yang lebih besar daripada lebar gabungan div #anak terapung. Oleh itu, semua div terapung dijajarkan secara mendatar dalam div #container, menghasilkan reka letak yang diingini.

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Penjajaran Div Mendatar dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
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