سایت آموزشی فری لرن
اجرا کن
مشاهده خروجی
<!DOCTYPE html> <html> <head> <style> * { box-sizing: border-box; } .seton-8 {width: 8.333%;} .seton-16 {width: 16.666%;} .seton-25 {width: 25%;} .seton-33 {width: 33.333%;} .seton-41 {width: 41.666%;} .seton-50 {width: 50%;} .seton-58 {width: 58.333%;} .seton-66 {width: 66.666%;} .seton-75 {width: 75%;} .seton-83 {width: 83.333%;} .seton-91 {width: 91.666%;} .seton-100 {width: 100%;} .row::after { content: ""; clear: both; display: table; } [class*="seton-"] { float: left; padding: 10px; border: 1px solid #001A2B; text-align:center; margin-top:5px; } /* وقتی اندازه صفحه کمتر از 500 پیکسل شد */ @media only screen and (max-width:500px) { [class*="seton-"] { float: none; width:100%; } } </style> </head> <body> <div class="row"> <div class="seton-8">8.33%</div> <div class="seton-8">8.33%</div> <div class="seton-8">8.33%</div> <div class="seton-8">8.33%</div> <div class="seton-8">8.33%</div> <div class="seton-8">8.33%</div> <div class="seton-8">8.33%</div> <div class="seton-8">8.33%</div> <div class="seton-8">8.33%</div> <div class="seton-8">8.33%</div> <div class="seton-8">8.33%</div> <div class="seton-8">8.33%</div> </div> <div class="row"> <div class="seton-8">8.33%</div> <div class="seton-16">16.66%</div> <div class="seton-25">25%</div> <div class="seton-33">33.33%</div> <div class="seton-16">16.66%</div> </div> <div class="row"> <div class="seton-25">25%</div> <div class="seton-25">25%</div> <div class="seton-25">25%</div> <div class="seton-25">25%</div> </div> <div class="row"> <div class="seton-50">50%</div> <div class="seton-50">50%</div> </div> <div class="row"> <div class="seton-25">25%</div> <div class="seton-75">75%</div> </div> </body> </html>
اشتراک گذاری
×
کپی آدرس
آدرس با موفقیت کپی شد
