Www.Free-Learn.Ir
اجرا کن »
<!DOCTYPE html> <html> <head> <title>سایت آموزشی من</title> <!-- قدم اول برای واکنش گرایی --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> *{ box-sizing: border-box; } /* برای ریسپانسیو بودن تصاویر */ img{ max-width:100%; } .main{ width:60%; background-color:#9C27B0; color:#fff; float:left; padding:10px; } .seton-rast{ width:40%; background-color:#607D8B; color:#fff; float:right; padding:10px; } /* برای تغییر چیدمان عناصر در موبایل */ @media only screen and (max-width: 560px) { .main,.seton-rast{ width: 100%; } } </style> </head> <body> <div class="main"> <h2>main</h2> </div> <div class="seton-rast"> <h2>seton-rast</h2> </div> <div style="clear:both; padding-top:20px;"> <img src="files/bg-21.jpg"> </div> </body> </html>