تالار میدوری

نسخه کامل: چینش تصاویر در سایت بصورت ریسپانسیو با CSS
شما در حال مشاهده نسخه تکمیل نشده می باشید. مشاهده نسخه کامل با قالب بندی مناسب.
چینش تصاویر در سایت بصورت ریسپانسیو با CSS
شايد شما هم بخواهيد در سایت خودتان چندين تصوير را در کنار هم قرار دهید . برای این منظور راهکارهای زیادی وجود دارد ولی ساده ترین راه کار را با استفاده از تعریف کلاس سی اس اس برای دوستان قرار میدم . امید که بکار بیاید . در این روش با هر نوع پهنایی از صفحه تصاویر بهم ریخته نمیشوند و ترتیبشان را حفظ میکنند . نخست نمونه ی زنده را در زیر ببینید (پنجره ی مرورگر را کوچک و بزرگ کنید) و در صورت نیاز از کدهای داده شده برای این منظور استفاده کنید .


کد HTML:
<style>
.content-four{width:95%;max-width:1024px;margin:10px auto 40px auto;background:#fff;
-webkit-columns:4 210px;-moz-columns:4 210px;columns:4 210px;}
.content-four img{display:inline-block;width:240px;max-width:100%;height:auto;margin:0 0 0.75em 0;}
</style>
<h1 style="text-align:center;">چینش تصویرها در سایت بصورت ریسپانسیو</h1>
<div class ="content-four">
<img src="images/p1.jpg" alt="">
<img src="images/p2.jpg" alt="">
<img src="images/p3.jpg" alt="">
<img src="images/p4.jpg" alt="">
<img src="images/p5.jpg" alt="">
<img src="images/p6.jpg" alt="">
<img src="images/p7.jpg" alt="">
<img src="images/p8.jpg" alt="">
<img src="images/p9.jpg" alt="">
<img src="images/p10.jpg" alt="">
<img src="images/p11.jpg" alt="">
<img src="images/p12.jpg" alt="">
</div>

لینک مرجع