<div> элементийг бусад HTML элементүүдийн сав (container) болгон ашигладаг.
<div> Элемент #
<div> элемент нь анхдагч байдлаар блок элемент бөгөөд энэ нь боломжит бүх өргөнийг эзэлдэг ба өмнөө болон хойноо мөр таслалттай байдаг гэсэн үг юм.
Жишээ
<div> элемент нь боломжит бүх өргөнийг эзэлдэг:
HTML
Lorem Ipsum <div>Би бол div</div> dolor sit amet.
Үр дүн
Lorem Ipsum
Би бол div
dolor sit amet.
<div> элементэд шаардлагатай атрибут байхгүй ч style, class болон id нь түгээмэл хэрэглэгддэг.
<div> нь сав (container) болох нь #
<div> элементийг ихэвчлэн веб хуудасны хэсгүүдийг нэгтгэхэд ашигладаг.
Жишээ
HTML элементүүдтэй <div> элемент:
HTML
<div>
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>London has over 9 million inhabitants.</p>
</div>
Үр дүн
London
London is the capital city of England.
London has over 9 million inhabitants.
<div> элементийг голлуулах #
Хэрэв танд 100% өргөн биш <div> элемент байгаа бөгөөд түүнийг голлуулахыг хүсвэл CSS-ийн margin шинж чанарыг auto болгож тохируулаарай.
Жишээ
HTML
<style>
div {
width:300px;
margin:auto;
}
</style>
Үр дүн
London
London is the capital city of England.
London has over 9 million inhabitants.
Олон <div> элементүүд #
Та нэг хуудсан дээр олон <div> савтай байж болно.
Жишээ
HTML
<div>
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>London has over 9 million inhabitants.</p>
</div>
<div>
<h2>Oslo</h2>
<p>Oslo is the capital city of Norway.</p>
<p>Oslo has over 700,000 inhabitants.</p>
</div>
<div>
<h2>Rome</h2>
<p>Rome is the capital city of Italy.</p>
<p>Rome has over 4 million inhabitants.</p>
</div>
Үр дүн
London
London is the capital city of England.
London has over 9 million inhabitants.
Oslo
Oslo is the capital city of Norway.
Oslo has over 700,000 inhabitants.
Rome
Rome is the capital city of Italy.
Rome has over 4 million inhabitants.
<div> элементүүдийг зэрэгцүүлэх #
Веб хуудас бүтээхдээ та ихэвчлэн хоёр ба түүнээс дээш <div> элементийг зэрэгцүүлэн байрлуулахыг хүсдэг, жишээ нь:
London
London is the capital city of England.
London has over 9 million inhabitants.
Oslo
Oslo is the capital city of Norway.
Oslo has over 700,000 inhabitants.
Rome
Rome is the capital city of Italy.
Rome has over 4 million inhabitants.
Элементүүдийг зэрэгцүүлэх янз бүрийн аргууд байдаг бөгөөд бүгд CSS загварчлалыг ашигладаг. Бид хамгийн түгээмэл аргуудыг авч үзэх болно:
Float #
CSS float шинж чанар нь анхнаасаа <div> элементүүдийг зэрэгцүүлэх зорилготой байгаагүй ч олон жилийн турш энэ зорилгоор ашиглагдаж ирсэн.
CSS float шинж чанар нь агуулгыг байрлуулах, форматлахад ашиглагддаг бөгөөд элементүүдийг босоо биш хэвтээ байдлаар байрлуулах боломжийг олгодог.
Жишээ
div элементүүдийг зэрэгцүүлэхийн тулд float-ийг хэрхэн ашиглах вэ:
HTML
<style>
.mycontainer {
width:100%;
overflow:auto;
}
.mycontainer div {
width:33%;
float:left;
}
</style>
Манай CSS float хичээлээс float-ийн талаар дэлгэрэнгүй үзнэ үү.
Inline-block #
Хэрэв та <div> элементийн display шинж чанарыг block-оос inline-block болгож өөрчилвөл <div> элементүүд өмнөө болон хойноо мөр таслалт нэмэхээ больж, бие биенийхээ дээр биш харин зэрэгцэж харагдах болно.
Жишээ
div элементүүдийг зэрэгцүүлэхийн тулд display: inline-block-ийг хэрхэн ашиглах вэ:
HTML
<style>
div {
width: 30%;
display: inline-block;
}
</style>
Flex #
CSS Flexbox Layout Module нь float эсвэл positioning ашиглахгүйгээр уян хатан, responsive бүтэцтэй загварыг хялбархан зохион бүтээх зорилгоор нэвтрүүлсэн.
CSS flex аргыг ажиллуулахын тулд <div> элементүүдийг өөр <div> элементээр хүрээлж, түүндээ flex container статус өгөх хэрэгтэй.
Жишээ
div элементүүдийг зэрэгцүүлэхийн тулд flex-ийг хэрхэн ашиглах вэ:
HTML
<style>
.mycontainer {
display: flex;
}
.mycontainer > div {
width:33%;
}
</style>
Манай CSS flexbox хичээлээс flex-ийн талаар дэлгэрэнгүй үзнэ үү.
Grid #
CSS Grid Layout Module нь мөр болон багана бүхий сүлжээнд суурилсан зохиомжийн системийг санал болгодог бөгөөд float болон positioning ашиглахгүйгээр веб хуудас зохион бүтээхэд хялбар болгодог.
Flex-тэй бараг ижил сонсогдож болох ч нэгээс олон мөрийг тодорхойлж, мөр бүрийг тус тусад нь байрлуулах чадвартай.
CSS grid арга нь та <div> элементүүдийг өөр <div> элементээр хүрээлж, grid container статус өгөх шаардлагатай бөгөөд багана бүрийн өргөнийг зааж өгөх ёстой.
Жишээ
<div> элементүүдийг зэрэгцүүлэхийн тулд grid-ийг хэрхэн ашиглах вэ:
HTML
<style>
.grid-container {
display: grid;
grid-template-columns: 33% 33% 33%;
}
</style>
Манай CSS grid хичээлээс grid-ийн талаар дэлгэрэнгүй үзнэ үү.
Дасгал? #
Дараах кодыг анхаарна уу:
HTML
<div style='width:200px;margin:auto'>
<h2>London</h2>
</div>
DIV элемент хэрхэн зэрэгцэх вэ?
- Зүүн талд зэрэгцэнэ
- Голлож зэрэгцэнэ
- Баруун талд зэрэгцэнэ
HTML Шошгууд #
| Шошго | Тайлбар |
<div> | Баримт бичгийн хэсгийг тодорхойлно (блок түвшний) |
Боломжит бүх HTML шошгуудын жагсаалтыг манай HTML Шошгын Лавлахаас үзнэ үү.
