如何在CSS中容納兩個盒子

首先，我很新的CSS，試圖學習它並理解它。我已經竭盡全力想出如何讓小小的選擇框與飼料，臉譜和推特圖標放在最上面，它應該放在哪裏，就在學校的標誌旁邊。你能幫我把所選的盒子放多一點嗎？謝謝。請檢查鏈接，圖像裏面，堆疊不會讓我上傳圖片。如何在CSS中容納兩個盒子

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，feeds框。

這裏其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>

感謝

來源

2010-12-14 arturodz

您正在要求排除所有這些ID的行。你介意發佈你的html嗎？離開我的頭頂，你可能需要清理你的浮標（
），並可能調整寬度。 – 2010-12-14 18:52:08

也需要html代碼。 – Lex 2010-12-14 18:53:41

剛剛添加了HTML，謝謝:) – arturodz 2010-12-14 18:56:28

添加float: left到#logo和#headbanner
添加float: right到#right
爲w憎恨者來到#header之後，加上clear: both：它確保主要內容在你之前向左或向右漂移的任何東西之後定位，而不是重疊它。

此外，正如zzzzBoy所說，無需在規則中提及每個ID（例如#header #inner #logo＃pandecta-logo）。您可以通過最終ID（＃pandecta-logo）引用它，因爲ID是唯一的，無論如何您都不能在同一個文檔的其他地方使用它們。

來源

2013-04-25 23:28:46 guidod

如何在CSS中容納兩個盒子

回答

相關問題