مشکل در استایل مطالب به صورت زوج و فرد

[moh3en68 2]

باسلام

دوستان من با قرار دادن یک شرط پست ها رو به دو قسمت زوج و فرد تقسیم کردم و به یک قسمت کلاس right (پست های سمت راست)و دیگری کلاس left (پست های سمت چپ)دادم بعد برای پست های سمت راست(پست های فرد) استایل :

float:right;
clear:right;

و برای پست های سمت چپ(پست های زوج) استایل:

float:left;
clear:left;

را قرار دادم ولی همانطور که در عکس پیوست شده میتوانید ببینید پست ها درست در جای خودشون قرار نمیگیرند و یه جاهایی خالی میمونه یعنی پست فرد به سمت راست میره ولی دقیقا به پست بالاییش نمیچسبه

برای اینکه معلوم باشه پستهای زوج و فرد در سمت درستی قرار گرفته اند دو رنگ متفاوت به آنها داده ام.

دوستان میدونند مشکل از کجاست؟

هر قسمتی از کد را خواستین بگین تا قرار بدهم ولی فکر کنم مشکل از همین قسمت float باشه

با تشکر

ویرایش شده خرداد 94 توسط moh3en68

[Ghaem 1492]

زیاد با سی اس اس آشنا نیستم. min-height و max-height رو امتحان کردید؟

[imanfakhar 26231]

چیزی که می خواهید رو یا باید با افزونه جی کوئری masonry بسازید یا به div ها ارتفاع ثابت بدید

height:180px;
overflow:hidden;

در ضمن بخونید:

http://desandro.com/masonry

http://masonry.desandro.com/

http://isotope.metafizzy.co/layout-modes/masonry.html

[moh3en68 2]

زیاد با سی اس اس آشنا نیستم. min-height و max-height رو امتحان کردید؟

من نمیخوام ارتفاع را محدود کنم و اصلا مشکل ارتفاع نیست مشکل از اینه که وقتی clear right و float right میدم اینطور که من میدونم باید کاری به ارتفاع سمت چپیش نداشته باشه و اینقد بره بالا تا به یک پست که float right داره برسه و اونجا متوقف بشه ولی این اتفاق نمیافته و به پست سمت چپ گیر میکنه و نمیدونم چرا گیر میکنه

چیزی که می خواهید رو یا باید با افزونه جی کوئری masonry بسازید یا به div ها ارتفاع ثابت بدید

height:180px;
overflow:hidden;

در ضمن بخونید:

http://desandro.com/masonry

http://masonry.desandro.com/

http://isotope.metaf...es/masonry.html

همانطور که در بالا گفتم نمیخوام ارتفاع ثابت و اضافه ی پست مخفی بشه

زیاد انگیلیسیم خوب نیس

اینکه میگید از افزونه masonry استفاده کنید راستش من نمیخوام از افزونه استفاده کنم و میخوام خودم بنویسم و بفهمم اصلا چرا این div به div بقل گیر میکنه؟

وقتی افزونه وجود داره یعنی این کار شدنیه

این افزونه چکار کرده که این مشکل پیش نیامده؟

با تشکر از هردو دوست عزیز

[imanfakhar 26231]

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

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

[moh3en68 2]

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

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

دوست عزیز همون اول که نوشتید افزونه جی کوئری منظورتون را متوجه شدم ولی همانطور که خودتون فرمودید این افزونه ها یه اسکریپ داره(masonry.pkgd.min.js) که تمام کدهای اصلی توی اون نوشته شده و ما فقط باید کلاس هایی که توی راهنماشون نوشتند را به عناصرمون بدهیم و بعد تغییرات برنامه نویسی شده خودش اعمال میشه و این چیزیه که من نمیخوام

من در اصل میخوام بفهمم مشکل از کجاست تا یه چیزی هم یاد گرفته باشم(الان نمیدونم چرا در اینجا float درست کارنمیده)

لینک هایی هم که زحمت کشیدید گذاشتین نگاه کردم و اینطور که من فهمیدم همون راهنمای استفاده از masonry هست

انشاالله در پروژه های بعدیم از این افزونه خوب استفاده میکنم ولی الان دوست دارم ببینم مشکل کار از کجاست

با تشکر فراوان

[imanfakhar 26231]

مشکلی نیست float همین کاری رو می کنه که دارید می بینید به این تصویر دقت کنید سمت چپ خاصیت float و در سمت راست همون لایه ها به صورت masonry

اینکه "نمی خواهید از افزونه جی کوئری استفاده کنید" رو درک نمی کنم چه منطقی داره به هر حال اگر می خواهید یاد بگیرید که خاصیت float دقیقا همین وظیفه رو داره و اگر می خواهید تمام کدهاش را بنویسید اگر برنامه نویسی می دونید که خوب بشینید یک برنامه بنویسید که position ها رو absolute کنه و عرض و ارتفاع ها رو حساب کنه و با توجه به اونها به لایه ها موقعیتشون رو توصفحه اعلام کنه

ولی اینکار رو قبلا نویسندگان مسونری انجام دادند و در واقع وقت تلف کردنه!!

[علی زینلی 2114]

سلام ، بهترین راه همینی هست که استاد گفتن ، البتّه اگر میخواین ببینید چه شکلی این اتفّاق میفته در هر صورت شما نمیتونین از CSS تنها استفاده کنید چون این قابلیّت رو نداره

ببینید این نمونه به دردتون میخوره (جی کوئری):

http://jsfiddle.net/wqfoku85/

یه چند مدل دیگه هم هست که همه از جی کوئری و ساس استفاده کردن توی اینترنت اگر سرچ کنید tumblr style زیاده نمونه اش.

موفّق باشید

[imanfakhar 26231]

در تکمیل پاسخ جناب زینلی

در موردی که فرمودند هم از افزونه

http://suprb.com/apps/gridalicious/js/jquery.grid-a-licious.js

کنار جی کوئری استفاده شده

که باید دانلود و متصل بشه

[moh3en68 2]

مشکلی نیست float همین کاری رو می کنه که دارید می بینید به این تصویر دقت کنید سمت چپ خاصیت float و در سمت راست همون لایه ها به صورت masonry

اینکه "نمی خواهید از افزونه جی کوئری استفاده کنید" رو درک نمی کنم چه منطقی داره به هر حال اگر می خواهید یاد بگیرید که خاصیت float دقیقا همین وظیفه رو داره و اگر می خواهید تمام کدهاش را بنویسید اگر برنامه نویسی می دونید که خوب بشینید یک برنامه بنویسید که position ها رو absolute کنه و عرض و ارتفاع ها رو حساب کنه و با توجه به اونها به لایه ها موقعیتشون رو توصفحه اعلام کنه

ولی اینکار رو قبلا نویسندگان مسونری انجام دادند و در واقع وقت تلف کردنه!!

باسلام

اینکه گفتم نمیخوام از افزونه استفاده کنم چون حس میکردم برای این حالت که من نیاز دارم حتما با css میشه کار را درست کرد و برای حالت های پیچیده تر که بیش از دو ستون مطلب در صفحه وجود دارد(مثل مثال هایی که در صفحه افزونه masonry وجود داره و عکسی که شما گذاشتین) نیاز به محاسبه ارتفاع ها وجود داره که در این صورت حتما از افزونه استفاده میکردم.

ولی حالا که شما میفرمایید نمیشه خوب حتما نمیشه

طبق فرمایش شما رفتم از افزونه masonry استفاده کردم ولی درست نشد و فکر کنم درست نفهمیدم چطوری کار میکنه (همینطور که گفتم متاسفانه اوضاع انگلیسیم خرابه)

اینطور که من توی مثال هاش دیدم انگار به ستون ها ارتفاع داده و من اینطوری نمیخوام ، با این حال از کلاس هایی که گفته بود استفاده کردم ولی درست نشد.

من الان توی قالبم دو پست دارم، یکی در ستون سمت راست و دیگری در ستون سمت چپ که این دو پست باید کلاس های متفاوت و ثابتی داشته باشند همچنین همه پست هایی که در یک ستون قرار دارند کلاس یکسان داشته باشند(چون به اجزا داخل پست های هر ستون میخوام استایل متفاوتی نسبت به ستون دیگر بدم لازمه که به این شکل باشه)

اگه میشه لطف کنین بگین با این افزونه دقیقا من چه کلاسی به پست هام بدم؟به پست هایی که میخوام سمت راست قرار بگیره چه کلاسی بدم؟ و به پست های سمت چپ هم همینطور

با تشکر فراوان

سلام ، بهترین راه همینی هست که استاد گفتن ، البتّه اگر میخواین ببینید چه شکلی این اتفّاق میفته در هر صورت شما نمیتونین از CSS تنها استفاده کنید چون این قابلیّت رو نداره

ببینید این نمونه به دردتون میخوره (جی کوئری):

http://jsfiddle.net/wqfoku85/

یه چند مدل دیگه هم هست که همه از جی کوئری و ساس استفاده کردن توی اینترنت اگر سرچ کنید tumblr style زیاده نمونه اش.

موفّق باشید

با سلام

این لینکی که شما دادین را نگاه کردم ولی در اینجا به همه پست ها یک کلاس یکسان داده و با تغییر سایز صفحه تعداد ستون های مطالب تغییر میکنه و این با اون چیزی که من میخوام فرق داره چون من دو ستون ثابت دارم که با تغییر سایز صفحه بازهم همون دو ستون را داریم(در پست بالا کامل توضیح دادم که چی لازم دارم)

خیلی ممنون

[imanfakhar 26231]

بهترین و ساده ترین راه اینه که دو تا حلقه تشکیل بدید

<?php
if(have_posts()) :
$x=1;
?>
<table style="width: 100%">
<tr>
  <td>
<?php
while(havbe_posts()) :
if($x==1) { ?>
<div class="post">
کدهای داخل حلقه
</div>
<?php
}
if($x==1) { $x=2;} else { $x=1;}
endwhile;?>
</td>
  <td>
  <?php
  $x = 1;
while(havbe_posts()) :
if($x==2) { ?>
<div class="post">
کدهای داخل حلقه
</div>
<?php
}
if($x==1) { $x=2;} else { $x=1;}
endwhile;?>
  </td>
</tr>
</table>
<?php endif;?>

[علی زینلی 2114]

اگر مشکل فقط در دادن کلاس های متفاوت هست کد زیر یکی در میون کلاس دلخواه شما رو میده:

<?php echo (++$j % 2 == 0) ? 'chap' : 'rast'; ?>

درضمن اگر اصرار دارید که بدون افزونه انجام بدید اینکار رو یه حالت هست که میتونید height و width تصویر شاخص رو با PHP بگیرید و داخل تگ styleش قرار بدید (از طریق inline css) یعنی داخل کد های HTML بهش استایل بدید

اونم اینکه اوّل بگیرید تصویر شاخص رو

 <?php
		 $size_delkhah_shoma = wp_get_attachment_image_src(get_post_thumbnail_id(), 'thumbnail');; ?>

و حالا کد بالا به شما یه array میده که توش آدرس عکس ، اندازه و اطلّاعات دیگه اش جا داره

طول و عرض رو به صورت زیر بدید

<img src="<?php echo $size_delkhah_shoma[0]; ?>" alt="<?php echo get_the_title(); ?>" style="width:<?php echo $size_delkhah_shoma[1]; ?>; height:<?php echo $size_delkhah_shoma[2]; ?>">

البتّه درسته که با کد بالا میتونید کارتون رو راه بندازید ولی خب اگر از افزونه ها استفاده کنید راحت تر هم هستید چون رسپانسیوه.

موفّق باشید.

[moh3en68 2]

بهترین و ساده ترین راه اینه که دو تا حلقه تشکیل بدید

چون روی چند تا پروژه کار میکنم یکم طول کشید تا بیام اینجا نتیجه را بنویسم

ممنون بابت کدهاتون . راهنمایی خیلی خوبی کردین .حواسم نبود که میتونم از جدول هم استفاده کنم البته اون روش که من نوشته بودم یه حسنش این بود که یه حلقه داشت و نیاز نبود کدها را دوبار بنویسیم و فقط قسمت کلاس با شرط if تغییر میکرد ولی خوب یه مشکل بزرگ هم داشت که خدارو شکر این روش نداره

مشکل به کلی حل شد، با تشکر از هردو دوست عزیز که وقت گرانبهاشون را در اختیار بنده گذاشتند.

موفق و پیروز باشید.

[majid1889 733]

این دقیقا اونیه که شما میخوای:

http://jsfiddle.net/xmqcuy1a/

امیدوارم حل شه مشکلتون

×پ.ن: فک نکنم نیازی به جاوا اسکریپت و ... بود ؛ با css هم حل میشد !

ویرایش شده تیر 94 توسط majid1889

[علی زینلی 2114]

این دقیقا اونیه که شما میخوای: http://jsfiddle.net/xmqcuy1a/ امیدوارم حل شه مشکلتون ×پ.ن: فک نکنم نیازی به جاوا اسکریپت و ... بود ؛ با css هم حل میشد !

نه دیگه دوست عزیز ، کدی که شما دادی فقط یه مرجین ساده است! اگر طول پست ها کم و زیاد بشه (مثل پینترست) که سی اس اس به خودی خود نمیتونه تشخیص بده!

حرفه ای ترین راه استفاده از پلاگین جاوا اسکریپت (مثلاً همون پلاگینی که استاد معرفی کردن) هست

ساده ترین راه استفاده از کد های پی اچ پی برای دست آوردن ابعاد هست

[moh3en68 2]

این دقیقا اونیه که شما میخوای:

http://jsfiddle.net/xmqcuy1a/

امیدوارم حل شه مشکلتون

×پ.ن: فک نکنم نیازی به جاوا اسکریپت و ... بود ؛ با css هم حل میشد !

دوست عزیز اگه پست اول من راخونده باشین و عکسی که گذاشتم را دیده باشین من هم از همین روش float و clear استفاده کرده بودم و فقط شما در اینجا از nth-child برای زوج و فرد کردن استفاده کرده اید ولی بنده از php برای این قسمت استفاده کرده بودم اما در کل همانطور که در عکس پست اولم مشاهده میکنید با استفاده از این روش به مشکل برخوردم.

باتشکر

ویرایش شده تیر 94 توسط moh3en68