خصوصیت float
این خصوصیت برای موقعیت و محتوای قالب بندی استفاده می شود، برای مثال اجازه دهید یک تصویر به سمت چپ یا راست متن در یک باکس حرکت کند.
خصوصیت float می تواند یکی از مقادیر زیر را داشته باشد:
- – left : عنصر به سمت چپ ظرفش شناور می شود
- – right : عنصر به سمت راست ظرفش شناور می شود
- – none : عنصر شناور نیست (فقط در جایی که در متن ظاهر می شود نمایش داده می شود). این مقدار پیش فرض است
- – inherit : عنصر ارزش شناور والد خود را به ارث می برد
در ساده ترین استفاده، می توان از ویژگی های float استفاده کرد تا متن را در اطراف تصاویر قرار داد.
;float: right
مثال زیر مشخص می کند که یک تصویر باید در یک متن به سمت راست حرکت کند:
img {
float: right;
width:170px;
height:170px;
}<p><img src="pineapple.jpg" alt="Pineapple">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>خروجی :
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
;float: left
مثال زیر مشخص می کند که تصویر باید در یک متن به سمت چپ شناور شود:
img {
float: left;
width:170px;
height:170px;
}خروجی :
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
;float: none
در مثال زیر تصویر در جایی که در متن رخ می دهد نمایش داده می شود:
img {
float: none;
width:170px;
height:170px;
}خروجی :
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
خصوصیت clear
ای خصوصیت مشخص می کند که عناصر می توانند در کنار عنصردیگر شناور شوند یا نه و در چه طرفی این اجازه رو دارد.
خصوصیت clear می تواند یکی از مقادیر زیر را داشته باشد:
- – none : اجازه می دهد عناصر در هر دو طرف شناور شوند.(این مقدار پیش فرض است)
- – left : عناصر شناور در سمت چپ مجاز نیست
- – right : عناصر شناور در سمت راست مجاز نیست
- – both : عناصر شناور در هر دو طرف چپ و راست مجاز نیست
0 کامنت