نمونه های شناور (Float Examples)
در این صفحه، با نمونه های «شناور (Float)» کار می کنیم. شناور یعنی عنصر به چپ یا راست بچسبد و متن دورش بپیچد. مثل عکس کتاب که متن دورش حرکت می کند.
جعبه های هم عرض کنار هم
با شناور می توان چند جعبه را کنار هم چید. درصد عرض را طوری بده که مجموع، یک ردیف شود.
<style>
* {
box-sizing: border-box;
}
.box {
float: left;
width: 33.33%;
padding: 50px;
}
</style>
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
تصاویر کنار هم
همین الگو برای تصاویر هم جواب می دهد. هر ظرفِ تصویر، شناور و درصدی باشد.
<style>
.img-container {
float: left;
width: 33.33%;
padding: 5px;
}
img {
width: 100%;
height: auto;
}
</style>
<div class="img-container"><img src="img_5terre.jpg" alt="Italy"></div>
<div class="img-container"><img src="img_forest.jpg" alt="Forest"></div>
<div class="img-container"><img src="img_mountains.jpg" alt="Mountains"></div>
ارتفاع برابر؛ راه حل سریع
ارتفاع برابر با شناور سخت است. راهِ سریع، ارتفاعِ ثابت است. اما انعطاف کم می شود.
<style>
.box {
float: left;
width: 50%;
height: 300px;
padding: 20px;
}
</style>
<div class="box">Box 1</div>
<div class="box">Box 2 with more content</div>
جایگزین بهتر برای ارتفاع برابر: Flexbox
«فِلکس باکس (Flexbox)» ظرف را وادار می کند ستون ها قد بکشند. بنابراین ارتفاع ها برابر می شود.
<style>
.flex-container {
display: flex;
flex-wrap: nowrap;
}
.flex-container > div {
width: 50%;
margin: 10px;
text-align: center;
line-height: 50px;
font-size: 24px;
}
</style>
<div class="flex-container">
<div>Box 1 with tall content</div>
<div>Box 2 follows height</div>
</div>
منوی ناوبری افقی با فهرست
با شناورِ موردی روی آیتم های فهرست، منوی افقی بساز. هر لینک، کنارِ بعدی می نشیند.
<style>
ul.navbarmenu {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
ul.navbarmenu li {
float: left;
}
ul.navbarmenu li a {
display: inline-block;
color: #ffffff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul.navbarmenu li a:hover {
background-color: #111111;
}
ul.navbarmenu li a.active {
background-color: red;
}
</style>
<ul class="navbarmenu">
<li><a href="javascript:void(0)" class="active">Home</a></li>
<li><a href="javascript:void(0)">News</a></li>
<li><a href="javascript:void(0)">Contact</a></li>
<li><a href="javascript:void(0)">About</a></li>
</ul>
نکته: اگر ردیف به هم ریخت، از پاک سازی (Clear) کمک بگیر. اگر محتوا بیرون زد، صفحه سرریز (Overflow) را ببین.
گام های عملی
- عرض عناصر را درصدی تعیین کن.
- روی هر ستون،
floatبگذار. - در انتها، پاک سازی را اعمال کن.
جمع بندی سریع
- شناور، چینش افقی ساده می دهد.
- برای ارتفاع برابر، فلکس بهتر است.
- پاک سازی، شکستِ ردیف را می گیرد.
- درصد عرض، ریسپانسیو را آسان می کند.