رفتن به مطلب

مرتب سازی خودکار div ها


پست های پیشنهاد شده

سلام دوستان

l1957_ordpre.jpg

همینطور که در تصویر هم مشخص است من با div یک سری پست همراه با تصویر شاخص و توضیحات مختصری قرار دادم و از طریق خاصیت float هر دو پست را کنار هم قرار دادم ولی مشکلی که در این روش مشخص و واضح است این هست که اگر ارتفاع پستی زیاد یا کم شود بین پست ها از لحاظ ارتفاعی فاصله می افتد که فضای زیادی از قالب را هم اشغال می کند این مورد را می تونید در تصویر با عدد 1 ببینید.

ولی من می خواهم فاصله ها بوجود نیایند. شما سایت http://www.bekridea.com/blog/ را ببینید متوجه می شید که با وجود تفاوت در ارتفاع پست ها فضای خالی اضافی بین اون ها وجود نداره. من دقیق نمی دونم که آیا با css میشه راه حل این مسئله را پیدا کرد ولی فکر کنم با جی کوئری بشه درستش کرد. مثل بخش 2 تصویر که فضا های خالی پر شده اند.

لطفا از طریق css و jQuery راه حل بر طرف کردن این مشکل را بگید

متشکرم

لینک به ارسال

شما الان هر دو پست رو کنار هم قرار میدید

من یک پیشنهاد میکنم:

شما همه float ها رو بدید به راست. بعد در حلقه مشخص کنید که مثلا هر 4 پست در یک ستون باشن و بعد برای div های بعدی بره از بالا شروع کنه.

با اینکار براحتی همه پست ها از بلا به پایین و بعد در کنار هم چیده میشن.

لینک به ارسال

بعد در حلقه مشخص کنید که مثلا هر 4 پست در یک ستون باشن و بعد برای div های بعدی بره از بالا شروع کنه.

چجوری این کارو انجام بدم؟

لینک به ارسال

همچین چیزی میشه:

<?php

$i=1;
if(have_pos.....

if(($i%3)==0){echo "<div class="each">";}

if(($i%3)==0){echo "</div>";}

$i++;endif;

?>

که برای هر 3 پست یک div مادر جدا کننده قرار میده که داخلش 3 تا پست میره.

هرچند کد کامل نیست منظور رو میرسونه

لینک به ارسال

همچین چیزی میشه:

<?php

$i=1;
if(have_pos.....

if(($i%3)==0){echo "<div class="each">";}

if(($i%3)==0){echo "</div>";}

$i++;endif;

?>

که برای هر 3 پست یک div مادر جدا کننده قرار میده که داخلش 3 تا پست میره.

هرچند کد کامل نیست منظور رو میرسونه

من اصل قضیه رو گرفتم که چی شد ولی چون php خوب بلد نیستم نمی تونم کد را خودم بنویسم اگه میشه کد را شما درست کنید


<?php
global $post;
$myposts = get_posts(array('numberposts' => 10, 'offset' =>1,'post_status'=>'publish'));
foreach($myposts as $post) :
setup_postdata($post);
?>
<li>
<?php
if ( has_post_thumbnail() ) {?>
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('thumbnail'); ?></a>
<?php }
else {?>
<a href="<?php the_permalink(); ?>"><img src="<?php bloginfo('template_url'); ?>/images/no-thumbnail.png" /></a>
<?php
}
?><div class="recent_post_det">
<a href="<?php the_permalink(); ?>" class="relatedlink"><?php the_title(); ?></a>
</div>
</li>
<?php endforeach; ?>
<?php wp_reset_query(); ?>

لینک به ارسال

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


.blog {
-moz-column-count:4;
-webkit-column-count:4;
column-count:4;}
.blog .post {display:inline-block}

لینک به ارسال

کد css


-moz-column-count:
-webkit-column-count:
column-count:

توسط چه مرورگرهایی پشتیبانی میشه؟

لینک به ارسال

همه ساپورت میشن:

http://www.w3schools.com/cssref/css3_pr_column-count.asp

لینک به ارسال

به گفتگو بپیوندید

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

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...