Question

盒子在一条线上，现在它们已经敲了三个为什么这个？

CSS：

#case_studies { margin:10px 0 0 5px; }  
            .case_study { float:left; width:258px; padding-left:19px; }             
            #case_studies .strip { width:279px; height:30px; margin:15px 0 20px -19px; }
                #case_studies h3.tri { background:transparent url("../images/ico_triangle.gif") no-repeat left; font-size:1.3em; padding:10px 0 10px 20px; }
            #case_studies .content img { margin-bottom:10px; }
                .light_green img { border:1px solid #7ac63c; }
                .light_orange img { border:1px solid #fa7605; }
                .light_blue img { border:1px solid #4dacd8; }

            #case_studies .green { background:#7ac63c url("../images/bg-greenstrip.gif") repeat 0 0; height:40px;}
                #case_studies a.green { background:transparent; text-decoration: underline; color:#7ac63c; }
                .light_green { background:#def1ce; width:260px; margin:0 15px 15px 0; } 

            #case_studies .orange { background:#82c1f1 url("../images/bg-orangestrip.gif") repeat 0 0; height:40px; }
                #case_studies a.orange { background:transparent; text-decoration: underline; color:#fa7605; }
                .light_orange { background:#feddc0; width:260px; margin:0 15px 15px 0; }    

            #case_studies .blue { background:#82c1f1 url("../images/bg-bluestrip.gif") repeat 0 0; height:40px;}
                #case_studies a.blue { background:transparent; text-decoration: underline; color:#4dacd8; }
                .light_blue { background:#d2eaf5; width:260px; margin:0 15px 15px 0; }  
            .case .content { padding:10px; }

HTML：

<div id="case_studies">     
    <div class="case_study light_green">
        <div class="strip green"><h3 class="tri">Industrial</h3></div>
        <div class="content case">
                <?php wp_reset_query(); ?>
                <?php query_posts('category_name=Industrial&showposts=1'); if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
                    <img src="<?php $key="case-study"; echo get_post_meta($post->ID, $key, true); ?>" alt="<?php the_title(); ?>" width="244" height="132" alt="<?php the_title(); ?>" />
                    <?php the_content(__('')); ?>
                <?php endwhile; ?>
                <?php endif; ?>
        </div>
    </div><!-- Featured Box END --> 

    <div class="case_study light_orange">
        <div class="strip orange"><h3 class="tri">Commercial</h3></div>
        <div class="content case">
             <?php wp_reset_query(); ?>
                <?php query_posts('category_name=Commercial&showposts=1'); if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
                    <img src="<?php $key="case-study"; echo get_post_meta($post->ID, $key, true); ?>" alt="<?php the_title(); ?>" width="244" height="132" alt="<?php the_title(); ?>" />
                    <?php the_content(__('')); ?>
                <?php endwhile; ?>
                <?php endif; ?>
        </div>
    </div><!-- Featured Box END -->         

    <div class="case_study light_blue">
        <div class="strip blue"><h3 class="tri">Domestic</h3></div>
        <div class="content case">  
            <?php wp_reset_query(); ?>
                <?php query_posts('category_name=Domestic&showposts=1'); if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
                    <img src="<?php $key="case-study"; echo get_post_meta($post->ID, $key, true); ?>" alt="<?php the_title(); ?>" width="244" height="132" alt="<?php the_title(); ?>" />
                    <?php the_content(__('')); ?>
                <?php endwhile; ?>
                <?php endif; ?>
        </div>
    </div><!-- Featured Box END --> 
</div>

Answer 1

这是因为在http://fluroltd.com/clients/harveys/wp-content/themes/harveys/css/base.css你有：

#page_case_studys { float:left; width:400px; margin-left:10px; }

强制将以下容器放入该盒子中。由于260 * 3 = 780，你需要至少一个780像素的盒子，不包括任何额外的填充或边距。

如果您在整个网站中特别需要#page_case_studys的宽度为400px，我建议为页面编写更具体的CSS样式以定位元素并将宽度设置为自动。

此外，由于同一样式表中的以下规则，这些框的宽度均为260：

.light_green { background:#def1ce; width:260px; margin:0 15px 15px 0; }

如果您使用的是Firefox，请下载Firebug并使用它来帮助解决您的CSS问题。在Chrome中，您可以右键单击该元素，然后转到“检查元素”。

CSS格式问题牛不是内联的

2 个答案: