Question

首先，我是非常新的CSS，试图学习并理解它。我已经绞尽脑汁想要弄清楚如何将带有Feed，facebook和twitter图标的小选择框放到顶部，它应该去哪里，就在学校标志旁边。你能帮我把选中的盒子放一点吗？谢谢。请检查链接，图片里面，堆栈不会让我上传图片。

http://cl.ly/3cyt

这是代码。

#header #inner {
    float: left;
    width: 960px;
    clear: both;
}
    #header #logo {
        height: 99px;
        clear: both;
        width: 730px;
        float: left;
}
    #header #inner #logo #pandecta-logo {
    float: left;
}
    #header #inner #logo #eld-logo {
    float: right;
}
    #header #inner #logo a {
        position: relative;
        top: -22px;
#header #inner #right {
    width: 200px;
    float: right;
}

“＃right”是twitter，facebook，feed box。

这是HTML

    <div id="inner">
        <!-- Logo -->
        <div id="logo">
            <a href="<?php echo get_option('home'); ?>/">
                <?php if (strlen($wpzoom_misc_logo_path) > 1) { ?>
                    <div id="pandecta-logo">
                    <img src="<?php echo "$wpzoom_misc_logo_path";?>" alt="<?php bloginfo('name'); ?>" />
                    </div>
                <?php } else { ?><img src="<?php bloginfo('stylesheet_directory'); ?>/images/logo.png" alt="<?php bloginfo('name'); ?>" /><?php } ?>
                <div id=eld-logo>
                <img src="<?php bloginfo('stylesheet_directory'); ?>/images/eld.png" alt="Logo Escuela Libre de Derecho" />
                </div>
            </a>
        </div> 
        <div id="head_banner">
            <?php if (strlen($wpzoom_ad_head_imgpath) > 1 && $wpzoom_ad_head_select == 'Yes') {?>
                 <?php if (strlen($wpzoom_ad_head_imgpath) > 1) { echo stripslashes($wpzoom_ad_head_imgpath); }?> 
            <?php } ?>

        </div>

        <div id="right">
            <div id="social">
                <ul>
                    <?php if (strlen($wpzoom_twitter) > 0) { ?><li class="button"><a href="http://twitter.com/<?php echo $wpzoom_twitter; ?>" title="<?php echo"$wpzoom_twitter_heading"; ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/icons/twitter.png" alt="Twitter" /></a></li><?php } ?>

                    <?php if (strlen($wpzoom_facebook) > 0) { ?><li class="button"><a href="<?php echo $wpzoom_facebook; ?>" title="<?php echo"$wpzoom_facebook_heading"; ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/icons/facebook.png" alt="Facebook" /></a></li><?php } ?>

                    <?php if (strlen($wpzoom_rssicon) > 0) { ?><li class="button"><a href="<?php echo $wpzoom_rssicon; ?>" title="<?php echo"$wpzoom_rssicon_heading"; ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/icons/rss.png" alt="RSS" /></a></li><?php } ?>

                </ul>
            </div>

由于

Answer 1

将float: left添加到 #logo 和 #headbanner
将float: right添加到 #right
对于#header之后的任何内容，添加clear: both：它确保主要内容在您之前或之前浮动的任何内容之后定位，而不是重叠它。

另外，正如zzzzBoy所说，不需要提及规则中的每个ID（例如#header #inner #logo＃pandecta-logo）。您可以通过最终ID（#pandecta-logo）引用它，因为ID是唯一的，无论如何您都不能在同一文档的其他地方使用它们。

如何在CSS中容纳两个框

1 个答案: