سایت آموزشی فری لرن
اجرا کن
مشاهده خروجی
<!DOCTYPE html> <html> <head> <style> *{ box-sizing: border-box; } body{ margin: 0; font-family:tahoma; } .title{ text-align: center; padding: 20px 10px; } .MyContainer{ display: grid; grid-template-columns: auto auto auto auto; padding: 0 4px; } .Seton{ padding: 0 2px; } .Seton img{ margin-top: 5px; vertical-align: middle; max-width:100%; } /* وقتی عرض صفحه کمتر از 600 پیکسل شد */ @media (max-width: 600px){ .MyContainer{ grid-template-columns: auto; } } </style> </head> <body> <div class="title"> <h2>گالری عکس با چینش نامرتب</h2> <p><b>در گوشی موبایل همه عکسا میوفتن زیرهم</b></p> </div> <div class="MyContainer"> <div class="Seton"> <img src="files/ig-4.jpg" style="width:100%"> <img src="files/ig-2.jpg" style="width:100%"> <img src="files/ig-3.jpg" style="width:100%"> <img src="files/ig-1.jpg" style="width:100%"> </div> <div class="Seton"> <img src="files/ig-1.jpg" style="width:100%"> <img src="files/ig-5.jpg" style="width:100%"> <img src="files/ig-2.jpg" style="width:100%"> <img src="files/ig-3.jpg" style="width:100%"> </div> <div class="Seton"> <img src="files/ig-5.jpg" style="width:100%"> <img src="files/ig-2.jpg" style="width:100%"> <img src="files/ig-3.jpg" style="width:100%"> <img src="files/ig-1.jpg" style="width:100%"> </div> <div class="Seton"> <img src="files/ig-1.jpg" style="width:100%"> <img src="files/ig-3.jpg" style="width:100%"> <img src="files/ig-5.jpg" style="width:100%"> <img src="files/ig-4.jpg" style="width:100%"> </div> </div> </body> </html>
اشتراک گذاری
×
کپی آدرس
آدرس با موفقیت کپی شد
