Phần tử phân chia HTML
Phần tử <div> được sử dụng làm vùng chứa cho các phần tử HTML khác.
Phần tử <div>
Phần tử <div> theo mặc định là phần tử khối, nghĩa là nó chiếm toàn bộ chiều rộng có sẵn và đi kèm với ngắt dòng trước và sau.
Ví dụ
Phần tử <div> chiếm toàn bộ chiều rộng có sẵn:
Lorem Ipsum <div>I am a div</div>
dolor sit amet.Kết quả
Hãy tự mình thử »
Phần tử <div> không có thuộc tính bắt buộc nhưng style , class và id là phổ biến.
<div> làm vùng chứa
Phần tử <div> thường được sử dụng để nhóm các phần của trang web lại với nhau.
Ví dụ
Phần tử <div> có phần tử HTML:
<div>
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>London has over 13 million inhabitants.</p>
</div>
Kết quả
London
London là thủ đô của nước Anh.
London có hơn 13 triệu dân.
Hãy tự mình thử »
Căn giữa phần tử <div>
Nếu bạn có phần tử <div> không rộng 100% và bạn muốn căn giữa nó, hãy đặt thuộc tính margin CSS thành auto .
Ví dụ
<style>
div {
width:300px;
margin:auto;
}
</style>Kết quả
London
London là thủ đô của nước Anh.
London có hơn 13 triệu dân.
Hãy tự mình thử »
Nhiều phần tử <div>
Bạn có thể có nhiều vùng chứa <div> trên cùng một trang.
Ví dụ
<div>
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>London has over 13 million inhabitants.</p>
</div>
<div>
<h2>Oslo</h2>
<p>Oslo is the capital city of
Norway.</p>
<p>Oslo has over 600.000 inhabitants.</p>
</div>
<div>
<h2>Rome</h2>
<p>Rome is the capital city of
Italy.</p>
<p>Rome has almost 3 million inhabitants.</p>
</div>
Kết quả
London
London là thủ đô của nước Anh.
London có hơn 13 triệu dân.
Oslo
Oslo là thủ đô của Na Uy.
Oslo có hơn 600.000 cư dân.
la Mã
Rome là thủ đô của Ý.
Rome có gần 3 triệu dân.
Hãy tự mình thử »
Căn chỉnh các phần tử <div> cạnh nhau
Khi xây dựng trang web, bạn thường muốn có hai hoặc nhiều phần tử <div> cạnh nhau, như thế này:
London
London là thủ đô của nước Anh.
London có hơn 13 triệu dân.
Oslo
Oslo là thủ đô của Na Uy.
Oslo có hơn 600.000 cư dân.
la Mã
Rome là thủ đô của Ý.
Rome có gần 3 triệu dân.
Có nhiều phương pháp khác nhau để căn chỉnh các phần tử cạnh nhau, tất cả đều bao gồm một số kiểu CSS. Chúng ta sẽ xem xét các phương pháp phổ biến nhất:
Trôi nổi
Thuộc tính CSS float ban đầu không nhằm mục đích căn chỉnh các phần tử <div> cạnh nhau, nhưng đã được sử dụng cho mục đích này trong nhiều năm.
Thuộc tính CSS float được sử dụng để định vị và định dạng nội dung, đồng thời cho phép các phần tử nổi cạnh nhau thay vì chồng lên nhau.
Ví dụ
Cách sử dụng float để căn chỉnh các phần tử div cạnh nhau:
<style>
.mycontainer {
width:100%;
overflow:auto;
}
.mycontainer div {
width:33%;
float:left;
}
</style>
Kết quả
London
London là thủ đô của nước Anh.
London có hơn 13 triệu dân.
Oslo
Oslo là thủ đô của Na Uy.
Oslo có hơn 600.000 cư dân.
la Mã
Rome là thủ đô của Ý.
Rome có gần 3 triệu dân.
Hãy tự mình thử »
Tìm hiểu thêm về float trong hướng dẫn CSS float của chúng tôi.
Chặn Nội tuyến
Nếu bạn thay đổi thuộc tính display của phần tử <div> từ block thành inline-block , các phần tử <div> sẽ không còn thêm dấu ngắt dòng trước và sau nữa và sẽ được hiển thị cạnh nhau thay vì chồng lên nhau.
Ví dụ
Cách sử dụng display: inline-block để căn chỉnh các phần tử div cạnh nhau:
<style>
div {
width: 30%;
display:
inline-block;
}
</style>
Kết quả
London
London là thủ đô của nước Anh.
London có hơn 13 triệu dân.
Oslo
Oslo là thủ đô của Na Uy.
Oslo có hơn 600.000 cư dân.
la Mã
Rome là thủ đô của Ý.
Rome có gần 3 triệu dân.
Hãy tự mình thử »
Uốn cong
Mô-đun bố cục CSS Flexbox được giới thiệu để giúp thiết kế cấu trúc bố cục đáp ứng linh hoạt mà không cần sử dụng float hoặc định vị dễ dàng hơn.
Để làm cho phương thức CSS flex hoạt động, hãy bao quanh các phần tử <div> bằng một phần tử <div> khác và đặt cho nó trạng thái là một thùng chứa flex.
Ví dụ
Cách sử dụng flex để căn chỉnh các phần tử div cạnh nhau:
<style>
.mycontainer {
display: flex;
}
.mycontainer
> div {
width:33%;
}
</style>
Kết quả
London
London là thủ đô của nước Anh.
London có hơn 13 triệu dân.
Oslo
Oslo là thủ đô của Na Uy.
Oslo có hơn 600.000 cư dân.
la Mã
Rome là thủ đô của Ý.
Rome có gần 3 triệu dân.
Hãy tự mình thử »
Tìm hiểu thêm về flex trong hướng dẫn CSS flexbox của chúng tôi.
Lưới
Mô-đun bố cục lưới CSS cung cấp một hệ thống bố cục dựa trên lưới, với các hàng và cột, giúp thiết kế trang web dễ dàng hơn mà không cần phải sử dụng các float và định vị.
Nghe gần giống như flex nhưng có khả năng xác định nhiều hàng và định vị từng hàng riêng lẻ.
Phương thức lưới CSS yêu cầu bạn bao quanh các phần tử <div> bằng một phần tử <div> khác và đặt trạng thái là vùng chứa lưới, đồng thời bạn phải chỉ định chiều rộng của mỗi cột.
Ví dụ
Cách sử dụng lưới để căn chỉnh các phần tử <div> cạnh nhau:
<style>
.grid-container {
display: grid;
grid-template-columns: 33% 33% 33%;
}
</style>
Kết quả
London
London là thủ đô của nước Anh.
Luân Đôn có hơn 13 triệu dân.
Oslo
Oslo là thủ đô của Na Uy.
Oslo có hơn 600.000 cư dân.
la Mã
Rome là thủ đô của Ý.
Rome có gần 3 triệu dân.
Hãy tự mình thử »
Tìm hiểu thêm về lưới trong hướng dẫn về lưới CSS của chúng tôi.
Thẻ HTML
| Tag | Description |
|---|---|
| <div> | Defines a section in a document (block-level) |
Để có danh sách đầy đủ tất cả các thẻ HTML có sẵn, hãy truy cập Tham khảo thẻ HTML của chúng tôi.
