clearfix after
بازگشت به صفحه اصلی
بازگشت به صفحه مقاله
دو ستونی
دو سطری
اجرای کد RUN »
<!DOCTYPE html> <html> <head> <style> div { border: 3px solid #73AD21; } .img1 { float: left; } .clearfix::after { content: ""; clear: both; display: table; } .img2 { float: left; } p,div {direction:rtl;} </style> </head> <body> <p>در این مثال ، تصویر از عنصر نگه دارنده خود ، بلند تر و شناور است ، در نتیجه از نگه دارنده خود بیرون می زند :</p> <div><img class="img1" src="w3css.gif" alt="W3Schools.com" width="100" height="140"> این یک متن تزئینی است و جهت نمایش نتیجه کد ها نوشته شده است. این یک متن تزئینی است و جهت نمایش نتیجه کد ها نوشته شده است...</div> <p style="clear:left">می توان یک کلاس clearfix به عنصر نگه دارنده اضافه کرد و مشکل را برطرف کرد :</p> <div class="clearfix"><img class="img2" src="w3css.gif" alt="W3Schools.com" width="100" height="140"> این یک متن تزئینی است و جهت نمایش نتیجه کد ها نوشته شده است. این یک متن تزئینی است و جهت نمایش نتیجه کد ها نوشته شده است...</div> </body> </html>