علی جمالی
2 سال پیش توسط علی جمالی مطرح شد
4 پاسخ

نمایش عکس ها شبیه به پینترست

سلام دوستان
من یک گالری عکس دارم و شبیه به سایت https://www.pinterest.com
 تصویر

و یک مشکلی که اینه که وقتی ارتفاع یک عکس زیاد میشه عکس زیریش به اندازه ارتفاع فاصله پیدا میکنه عکس بالا رو مشاهده کنید.. و من نمیخوام همچین اتفاقی بیفته میخوام لیوت بندیم شبیه به سایت پینترست باشه.
ممنون میشم راهنماییم کنید.


ثبت پرسش جدید
ASPgo
تخصص : HTML، CSS، PHP و JS، طراح قالب...
@asp.gosk 2 سال پیش مطرح شد
0

باید کد های مربوط به css رو تغییر بدی
تو height کارت ها از max-content استفاده کن و max-height و min-height تایین کن
بگو از flex استفاده میکنی یا grid تا کامل تر راهنمایی کنیم.


علی جمالی
تخصص : برنامه نویس وب
@alijamali 2 سال پیش آپدیت شد
0

سلام @asp.gosk
از grid استفاده میکنم
نمیتونم از max-content استفاده بکنم چون هر تصویر ارتفاع خودشو داره تو اون عکسی که فرستادم ارتفاع تصویر یکسان هست اما در اصل تصاویر من و زیاده و هرکدوم ارتفاع متفاوت داره.

css خام استفاده میکنم


ASPgo
تخصص : HTML، CSS، PHP و JS، طراح قالب...
@asp.gosk 2 سال پیش آپدیت شد
0

از پینترست اینسپکت گرفتم چیزی نفهمیدم احتمالا از یه تکنیک خاص استفاده کردن
یه راهی وجود داره که یکم Responsive سازیش پیچیدس. میتونی مثلا 4 تا ستون تعریف کنی و اون ها رو کنار هم قرار بدی و تصاویر(یا کارت تصاویر) رو تو اون ستون ها قرار بدی
منبع
کد این لینکی که دادم رو بررسی کنی میبینی که برای قرار دادن ستون ها کنار هم از Float استفاده کرده تو میتونی ستون ها رو تو یه div قرار بدی و بهش display flex یا grid بدی.
البته اگه محتوا سایتت داینامیک باشن و قراره از دیتابیس خونده بشن foreach کردن اطلاعات تو ستون ها خیلی دردسر داره


علی جمالی
تخصص : برنامه نویس وب
@alijamali 2 سال پیش آپدیت شد
0

سلام @asp.gosk
ممنون این لینکی که دادین رو نگاه کردم قبلاً هم دیده بودم .
بله درست میگید . من میخواستم از روش همین لینک استفاده کنم ولی foreach اطلاعات بلد نیستم یعنی نمیدونم چه جوری توی لاراول foreach رو برای هر ستون بزنم.
اگه میتونید راهنمایی کنیدم لطفاً راهنمایی کنید. ممنون


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام