اجرا ❯
بازگشت
به
آموزشگاه
×
Change Orientation
Save Code
Change Theme, Dark/Light
Go to Spaces
<!DOCTYPE html> <html dir="rtl"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * { box-sizing: border-box; } /* ظرفی برای جعبه های فلکس(فلکس باکس ها) */ .container { display: flex; flex-wrap: wrap; } /* ایجاد چهار ستون برابر */ .column { flex: 25%; padding: 20px; } /*برای صفحه هایی که عرض آنها 992 پیکسل یا کمتر است، از چهار ستون به دو ستون تغییر کند*/ @media screen and (max-width: 992px) { .column { flex: 50%; } } /*برای صفحه هایی که 600 پیکسل یا کمتر، عرض دارند، کاری می کنیم که ستون ها روی یکدیگر بیفتند؛ به جای اینکه در کنار هم قرار گیرند*/ @media screen and (max-width: 600px) { .container { flex-direction: column; } } </style> </head> <body> <h2>چینش چهار ستونه ی واکنش گرا</h2> <p><strong>این پنجره را تغییر اندازه دهید تا تاثیر را مشاهده کنید.</strong></p> <p>در صفحه هایی که 992 پیکسل یا کمتر، عر ض دارند، ستون های چهارگانه، به دو ستون تبدیل می شوند. در صفحه هایی که 600 پیکسل یا کمتر عرض دارند، ستون ها روی یکدیگر قرار می گیرند؛ به جای اینکه در کنار یکدیگر قرار گیرند. </p> <div class="container"> <div class="column" style="background-color:#aaa;"> <h2>ستون 1</h2> <p>مقداری متن</p> </div> <div class="column" style="background-color:#bbb;"> <h2>ستون 2</h2> <p>مقداری متن</p> </div> <div class="column" style="background-color:#ccc;"> <h2>ستون 3</h2> <p>مقداری متن</p> </div> <div class="column" style="background-color:#ddd;"> <h2>ستون 4</h2> <p>مقداری متن</p> </div> </div> </body> </html>
