مشکل در css

[desatir7316]

سلام دوستان و اساتید محترم
می خوام توی صفحه ای که طراحی می کنم یه سری عکس نمایش بدم که همشون عرض برابری دارن ولی ارتفاع عکس ها با هم فرق داره
حالا می خوام همه عکس ها زیر هم بیوفتن و فضای خالی بینشون ایجاد نشه
یه نمونه عکس هم گذاشتم که منظرم رو می رسونه
ممنون می شم راهنمایی کنید

[omidabedi]

خب میتونی برای div هات که این قسمت ها رو تشکیل میدن min-height بزاری که از یه سایزی کوچکتر نشن
یا اینکه همشون رو توی یه div دیگه بزاری و به خودشون ارتفاع auto بدی که هر چه یکی از این قسمت ها بزرگتر شد div بزرگتر هم ارتفاعش زیاد بشه در نتیجه همه ی div های داخلی هم اندازه اون بشن
مشکل این راه اینه که باید ارتفاع div کلی رو fix بدی و نمیتونی auto بدی/قاعدتا نباید بشه اما خب تست کن

[desatir7316]

دوست عزیز جوابی رو که دادی خودت تستش کردی؟
شما ظاهرا متوجه سوال من نشدید! ربطی به fix بودن هم نداره عزیز - اگه می شه نمونه کدتونو بذارید
میشه همه رو کنار هم قرار داد ولی من می خوام هر دقیقا زیر عکس بالاییش قرار بگیره که نمی شه
دوستان ممنون می شم راهنمایی کنید

[omidabedi]

دوست عزیز جوابی رو که دادی خودت تستش کردی؟
شما ظاهرا متوجه سوال من نشدید! ربطی به fix بودن هم نداره عزیز - اگه می شه نمونه کدتونو بذارید
میشه همه رو کنار هم قرار داد ولی من می خوام هر دقیقا زیر عکس بالاییش قرار بگیره که نمی شه
دوستان ممنون می شم راهنمایی کنید

اره من فکر کرد برای طراحی کلی میخوای اصلا حواسم به عکس نبود.

خب این فاصله ها که افتاده طبق تصویر.دلیلش چیه؟
با margin منفی احتمالا درست بشه

اگر نشد
position رو برابر absolute قرار بده و بعد با top یا bottom تنظیمشون کن

[Omid Jackson]

نمونه کد (http://jsfiddle.net/OmidJackson/92B7H/)
شما یه دیو کلی میگیرین که من تو نمونه کد اسم کلاس رو گذاشتم cont بعد داخلش رو تبدیل به چند ستون میکنین که من گذاشتم cl و اینکه float هم بهش میدین تا بچسبن به هم و بعد داخل هر کدوم از ستون ها عکس ها رو میذارین
نمونه کدی که آماده کردم بخاطر اینکه کار سریع انجام بشه خیلی روش کار نکردم ولی کاملا واضح هست کارم
عکس ها زیر هم قرار میگیرن وارد محیط اونیکی عکس نمیشن که بخواد بهم بریزه

[desatir7316]

دوست عزیز ممنون ولی میشه بدون دادن تعداد ستون هم این کار رو کرد؟
چون می خوام موقع تغییر سایز مرورگر خودش به طور اتوماتیک تعداد ستون ها رو تنظیم کنه
یعنی مثلا وقتی 5 ستون شده و مرورگر رو کوچکتر کنیم بشه مثلا 3تا ستون

[desatir7316]

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

[Omid Jackson]

برای CSS من نظر خاصی در این رابطه ندارم
چون داینامیک هست، نیاز به برنامه نویسی هم دارین، من پیشنهاد میدم بخواین پلاگین جی کوئری براتون بنویسن
البته اینجا نه، چون کار زیاد داره، سایتی مثل پونیشا و ...

[desatir7316]

ممنون عزیز ولی به نظر نمیاد اونقدر ها سنگین باشه
بقیه دوستان اگه راهنمایی کنن ممنون میشم

[omidabedi]

ممنون عزیز ولی به نظر نمیاد اونقدر ها سنگین باشه
بقیه دوستان اگه راهنمایی کنن ممنون میشم

خوب دوست عزیز وقتی داینامیک هست با حلقه اینارو render میکنی؟
اگر اره خب میشه با php کاری کرد که هر عکسی رو تو یک ستون بزاره

[hasan_esfahan]

<div>
<div>
<img src="./img/1.jpg" />
<img src="./img/6.jpg" />
</div>
<div>
<img src="./img/2.jpg" />
<img src="./img/3.jpg" />
</div>
<div>
<img src="./img/4.jpg" />
<img src="./img/5.jpg" />
</div>
</div>




div div{
max-width:400px;
float:left;
}