آموزش سی اس اس CSS

میتوان با کمک پراپرتی float گریدی از باکس ها درست کرد که حتی با تغییر سایز مرورگر باز هم مرتب کنار یکدیگر قرار بگیرند.

اما با استفاده از مقدار inline-block پراپرتی display حتی اینکار ساده تر شده است.

المانهای inline-block همانند المان های inline نمایش داده میشوند اما میتوانند طول و ارتفاع داشته باشند.

زمانی که از پراپرتی float استفاده کنیم باید پراپرتی clear را بعد از باکس هایی که شناور شده اند استفاده کنید.

 
.floating-box {
    float: left;
    width: 150px;
    height: 75px;
    margin: 10px;
    border: 2px solid #446cb2; 
}
.after-box {
    clear: left;
}
 

میتوان با استفاده از مقدار inline-block پراپرتی display مشابه گرید بالا را ایجاد کرد، با این تفاوت که دیگر نیازی به پراپرتی clear نمیباشد.

 
.floating-box {
    display: inline-block;
    width: 150px;
    height: 75px;
    margin: 10px;
    border: 2px solid #446cb2; 
}