سایت آموزشی فری لرن
اجرا کن
مشاهده خروجی
<!DOCTYPE html> <html> <head> <style> * { box-sizing:border-box; } .zarf::after { content: ""; clear: both; display: table; } .seton-rast { background-color:#607D8B; color:#fff; padding:20px; text-align:center; } .seton-chap { background-color:#9C27B0; color:#fff; padding:20px; text-align:center; } .seton-rast,.seton-chap { float:none; width:100%; } /* وقتی اندازه صفحه بیشتر از 500 پیکسل شد */ @media only screen and (min-width:500px) { .seton-rast { float: right; width: 50%; } .seton-chap { float: left; width: 50%; } } </style> </head> <body> <div class="zarf"> <div class="seton-rast">ستون 1</div> <div class="seton-chap">ستون 2</div> </div> </body> </html>
اشتراک گذاری
×
کپی آدرس
آدرس با موفقیت کپی شد
