Атрибут CSS Float не будет размещать элементы изображения рядом друг с другом, кто-нибудь увидит, что не так с кодом? - PullRequest
Новая
       26

Атрибут CSS Float не будет размещать элементы изображения рядом друг с другом, кто-нибудь увидит, что не так с кодом?

0 голосов
/ 05 августа 2011

Это для сайта Wordpress, работающего на Thesis.То, что я пытаюсь сделать, это иметь область избранных постов, заполненную теми постами, которые я поместил в категории Featured / Featured2.

Это PHP 

function custom_featured_box() {
    if(is_home()) {
?>
<div id="featuredbox" class="clearfix">
        <?php $my_query = new WP_Query('category_name=featured&showposts=1');
        while ($my_query->have_posts()) : $my_query->the_post(); $do_not_duplicate = $post->ID;
        ?>
            <div id="featuredbox-main" style="background: url(<?php the_post_thumbnail('featured') ?>) no-repeat;">
                <a href="<?php the_permalink() ?>"><?php the_title() ?></a>
            </div>
            <?php endwhile; ?>
        <?php $my_query = new WP_Query('category_name=featured2&showposts=3');
        while ($my_query->have_posts()) : $my_query->the_post(); $do_not_duplicate = $post->ID; 
        ?>
            <div id="featuredbox-secondary">
                <div class="secondary-item" style="width: 205px; background: url(<?php the_post_thumbnail() ?>) no-repeat;">
                    <a href="<?php the_permalink() ?>"><?php the_title() ?></a>
                </div>
            </div>
        <?php endwhile; ?>
    </div>
<?php
} }

«Новый WP_Query»функция просто вызывает категории «Featured» и «Featured2» (<- это для вторичных избранных сообщений) и занимает первое сообщение (для категории «Featured») и первые 3 (для категории «Featured2») иразместив их в разделе рекомендуемых сообщений.Единственная проблема, с которой я столкнулся, заключается в том, что # featured-Secondary не ставит посты "featured2" рядом друг с другом.Также миниатюрные изображения не отображаются, но я не удосужился попытаться это выяснить. </p>

Вот CSS: 

.custom #feature_box { padding:0em; }

.custom #featuredbox { padding: 8px 0 10px 0;}
.custom #featuredbox-main {overflow: hidden; width: 650px; height: 225px; border: solid      
1px #ccc; margin: 0 0 10px 0; position: relative;}
.custom #featuredbox-main a:hover {text-decoration: underline;}
    .custom #featuredbox-main a {z-index: 1; position: absolute; top: 121px; min-   
height: 35px; left: 0; font-size: 20px; font-weight: bold; color: #fff; padding: 15px 
10px; width: 100%; background: url(http://location-of-the-background-here);}

.custom #featuredbox-secondary {height: 162px; overflow: hidden; width: 650px;}
    .custom .secondary-item {margin-right: 10px; position: relative; border: solid 1px 
#ccc; height: 160px; float: left; overflow: hidden;}
    .custom .secondary-item a:hover {text-decoration: underline;}
    .custom .secondary-item a {z-index: 1; position: absolute; top: 52px; left: 0; 
font-size: 12px; font-weight: bold; color: #fff; padding: 8px 10px; width: 185px;    
background: url(http://location-of-the-background-here);}

Я не понимаю, почему CSS неНе делайте # featuredbox-вторичные посты рядом друг с другом.

Любая помощь будет принята с благодарностью.

PS Вот скриншот того, как это выглядит с текущим кодомНадеюсь, это поможет людям понять, к чему я клоню.http://img43.imageshack.us/img43/3011/csshelp.jpg

1 Ответ

0 голосов
/ 05 августа 2011

Если я правильно вас понимаю, то вы хотите, чтобы каждый div с классом "Second-Item", который находится внутри DIV с идентификатором "Featuredbox-Secondary", плавал рядом друг с другом?Если это так, вам нужно применить объявление float к классу "Second-Item".

...