estedadrap 4 ارسال شده در اردیبهشت 98 گزارش بازنشر ارسال شده در اردیبهشت 98 سلام من یه grid از مطالب ایجاد کردم میخواستم با css اون رو برای سایز های مختلف رسپانسیو کنم مثلا در سایز 360*640 دو ستونه بشه و عکس ها کنار هم قرار بگیره یا مثلا داخل سایز 768*1024 سه ستونه یا چهار ستونه بشه این کد php <?php ?> <div class="gridcontainer"> <?php // Grid Parameters $counter = 0; // Start the counter $grids = 6; // Grids per row $titlelength = 20; // Length of the post titles shown below the thumbnails // The Query $args=array ( 'post_type' => 'lyrics', 'posts_per_page' => 6 ); $the_query = new WP_Query($args); // The Loop while ( $the_query->have_posts() ) : $the_query->the_post(); // Show all columns except the right hand side column if($counter != $grids) : ?> <div class="griditemleft"> <div> <a class="call3" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail(); ?></a> </div><!-- .postimage --> <h2 class="call4"> <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"> <?php if (mb_strlen($post->post_title) > $titlelength) { echo mb_substr(the_title($before = '', $after = '', FALSE), 0, $titlelength) . ' ...'; } else { the_title(); } ?> </a> </h2> </div><!-- .griditemleft --> <?php // Show the right hand side column elseif($counter == $grids) : ?> <div class="griditemright"> <div> <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail(); ?></a> </div><!-- .postimage --> <h2 class="call4"> <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"> <?php if (mb_strlen($post->post_title) > $titlelength) { echo mb_substr(the_title($before = '', $after = '', FALSE), 0, $titlelength) . ' ...'; } else { the_title(); } ?> </a> </h2> </div><!-- .griditemright --> <div class="clear"></div> <?php $counter = 0; endif; $counter++; endwhile; wp_reset_postdata(); ?> </div><!-- .gridcontainer --> و اینم کد های css .gridcontainer .griditemleft{float: left; width: 150px; margin: 0 5px 15px 0;} .call4{ font-size: 12px; background-color: rgba(161,160,161,1); padding-left: 10px; padding-bottom: 4px; padding-top: 2px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .call3{ color:#123215; } نقل قول لینک به ارسال
estedadrap 4 ارسال شده در اردیبهشت 98 مالک گزارش بازنشر ارسال شده در اردیبهشت 98 لطفا کمک کنید خیلی ضروریه نقل قول لینک به ارسال
estedadrap 4 ارسال شده در اردیبهشت 98 مالک گزارش بازنشر ارسال شده در اردیبهشت 98 up.... نقل قول لینک به ارسال
فرهاد-سئو 905 ارسال شده در اردیبهشت 98 گزارش بازنشر ارسال شده در اردیبهشت 98 شما باید کلاس تعریف کنید و سپس در فایل css به اون کلاس استایل بدین و سپس به اون کلاس اندازه پهنا رو تعیین کنید تا سیستم زمان کوچک شدن صفحه کلاس مورد نظر رو لود کنه برای اینکار بهتر است از فریمورک های آماده ای چون بوت استرپ استفاده کنید 1 نقل قول لینک به ارسال
estedadrap 4 ارسال شده در اردیبهشت 98 مالک گزارش بازنشر ارسال شده در اردیبهشت 98 در 16 ساعت قبل، فرهاد گفته است : شما باید کلاس تعریف کنید و سپس در فایل css به اون کلاس استایل بدین و سپس به اون کلاس اندازه پهنا رو تعیین کنید تا سیستم زمان کوچک شدن صفحه کلاس مورد نظر رو لود کنه برای اینکار بهتر است از فریمورک های آماده ای چون بوت استرپ استفاده کنید تشکر واقعا همین راهنماییتون باعث شد که انجامش بدم از طریق @media (min-width: 1068px) نقل قول لینک به ارسال
پست های پیشنهاد شده
به گفتگو بپیوندید
هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .