مشکل با float

amin704

کاربر عضو
سلام

دوستان نمیدونستم چه عنوانی بزنم واسه همین اینطوری عنوان رو زدم

من یه استایل بندی به این شکل دارم :

<div class="pupslide"> <?php$args = array( 'post_type' => 'post', 'posts_per_page' => 10, 'orderby' => 'meta_value_num', 'meta_key' => 'views', 'order' => 'DESC',);$my_query = new WP_Query( $args );while ($my_query->have_posts()):$my_query->the_post();$do_not_duplicate = $post->ID; ?><?php $views = get_post_meta($post->ID, 'views', true); ?> <div class="pup"> <figure><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?phpif ( has_post_thumbnail() ){$src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );$thumbnailsrc= $src[0];$params = array( 'width' => 119 ,'height' => 160, 'crop' => true );?><img src="<?php echo bfi_thumb( $thumbnailsrc , $params ) ?>" alt="<?php the_title(); ?>" title="<?php the_title(); ?>" width="119" height="160" /><?php } else { ?><img src="<?php bloginfo('template_directory'); ?>/images/tumbnail.png" alt="<?php the_title(); ?>" title="<?php the_title(); ?>" width="119" height="160" /><?php }?></a><figcaption><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></figcaption> <div class="cat"><?php$category = get_the_category();if ($category) { echo '<a href="' . get_category_link( $category[0]->term_id ) . '" title="' . sprintf( __( "مشاهده تمام پست های %s" ), $category[0]->name ) . '" ' . '>' . $category[0]->name.'</a> ';}?></div> </div><?php endwhile; ?> </figure> </div>حالا مشکلم اینه که به کلاس pup

float:left دادم، حالا pupslider که بهش border دادم، این بردر کل مجموعه رو در بر نمیگیره و فقط بالای عناصر واسه خودش تشکیل شده... چطوری حلش کنم؟

اینم کدهای استایل :

.slider{border;1px solid gray;}.pup {float: left;margin: 7px;width: 119px;background: rgba(140, 140, 140, 0.43);position: relative;border: 1px solid gray;padding: 2px;display: block;}.pup figure {margin: 0px;}.pup figcaption {position: absolute;display: none;top: 1px;background: gray;width: 119;}.pup figcaption a {-webkit-transition: all 0.1s;transition: all 0.1s;color: white;font: 12px arial;padding: 2px;}.mv-cat {display: none;position: absolute;background: white;bottom: 1px;width: 119;}.mv-cat a {padding: 2px;color:black;}.pup:hover figcaption, .pup:hover .cat {display: block;}
You must be registered for see images attach


 

Mohammad

مدیر انجمن
پرسنل مدیریت
شما قبل از پایان div اخرین باید یک clear بزنی

<div style="clear:both;"></div>مرتفع میشه

 

amin704

کاربر عضو
ممنون با استفاده از ul li و clear:both حل شد

حالا مشکلم اینه که میخوام overflow scrol بدم اما چون height:1000px هست، عکس ها بعد از این که تا انتهای ستون افقی رو پر میکنن، یه ستون دیگه زیرش تشکیل میدن و در واقع با height دادن، scrol عمودی درست میشه، اما به دلایلی اسکرال عمودی نمیخوام و در اصل اسکرال افقی میخوام، بدون دستکاری width

در اصل موضوع اصلی که میخوام اینه که مثل اسلایدر ، یه صفحه بندی داشته باشم حالا اگه میشه این اسکرال رو به صفحه بندی تبدیل کرد که بهتر و گرنه راه دیگه واسه صفحه بندی هست؟ با css یا جی کوری؟ یه حالتی میخوام تبدیل به اسلایدر کروسال بشه

چنین چیزی ممکنه؟

 
آخرین ویرایش توسط مدیر:

Mohammad

مدیر انجمن
پرسنل مدیریت
چرا از کدای اماده استفاده نمی کنی؟

مثلا owl کروسال

 
بالا