اجرا ❯
بازگشت
به
آموزشگاه
×
Change Orientation
Save Code
Change Theme, Dark/Light
Go to Spaces
<!DOCTYPE html> <html dir="rtl"> <head> <style> div { border: 3px solid #4CAF50; padding: 5px; text-align:left; } .img1 { float: right; } .img2 { float: right; } .clearfix::after { content: ""; clear: both; display: table; } </style> </head> <body> <h2>بدون Clearfix</h2> <p>این تصویر به سمت راست شناور(float) است. همچنین این تصویر از عنصر دربردارنده ی خود بلندتر است، بنابراین از عنصر دربردارنده ی خود سرریز(overflow) می شود:</p> <div> <img class="img1" src="other/pineapple.jpg" alt="Pineapple" width="170" height="170"> ابر و باد و مه و خورشید و فلک در کارند تا تو نانی به کف آری و به غفلت نخوری </div> <h2 style="clear:right">با دستور مدرن و جدید Clearfix</h2> <p>هک clearfix جدید را به عنصر دربردارنده اضافه کرده ایم تا این مشکل حل شود:</p> <div class="clearfix"> <img class="img2" src="other/pineapple.jpg" alt="Pineapple" width="170" height="170"> ابر و باد و مه و خورشید و فلک در کارند تا تو نانی به کف آری و به غفلت نخوری </div> </body> </html>
