設置浮動到左邊時圖像消失

Question

我剛剛進入HTML/CSS開發，並試圖構建我的第一個WordPress主題，但我在HTML和CSS中遇到了一些問題。

我想要完成的是在左側顯示圖像（使用float：left）和另外兩個圖像，另一個超鏈接和右側的搜索字段（float：right） 。

當我刪除浮動：左;從.log包裝器中顯示徽標，但右側的元素被壓下一行。我讀到這是由於顯示：塊。但是，當我添加浮動：左後方，圖像完全消失。

爲什麼會發生這種情況？我該如何解決這個問題？

<div id="site-header-container"> 

     <header id="site-header" class="site-header" role="banner"> 

      <div id="header-wrapper" class="header-wrapper"> 

       <div id="logo-wrapper" class="logo-wrapper"> 
        <!--Site Logo--> 
        <a class="home-link-logo" href="<?php echo esc_url(home_url('/')); ?>" title="<?php echo esc_attr(get_bloginfo('name', 'display')); ?>" rel="home"> 
        </a> 
       </div> 

       <div id="outer-social-wrapper" class="outer-social-wrapper"> 
        <div id="social-wrapper" class="social-wrapper"> 
         <div id="languages-wrapper" class="languages-wrapper"> 
          <!--Languages--> 
          US 
          NL 
         </div> 
         <div id="contact-wrapper" class="contact-wrapper"> 
          <!--Contact--> 
          CONTACT 
         </div> 
         <div id="search-wrapper" class="search-wrapper"> 
          <!--Search Form--> 
          SEARCH 
         </div> 
        </div> 
       </div> 
      </div> 

     </header> 

    </div> 

.logo-wrapper { 
    float: left; 
} 

.home-link-logo { 
    background: url("images/logo.jpg") no-repeat; 
    display: block; 
    max-width: 1000px; 
    min-height: 82px; 
} 

.outer-social-wrapper { 
    float: right; 
} 

.languages-wrapper { 
    float: left; 
} 

.contact-wrapper { 
    float: left; 
} 

.search-wrapper { 
    float: left; 
} 

Answer 1

.logo-wrapper, .languages-wrapper, .contact-wrapper, .search-wrapper { 
    display: inline-block; 
} 
.home-link-logo { 
    position: absolute; 
    background: url("https://www.apple.com/imac/images/buystrip_retail.png") no-repeat; 
    top: 0; 
    width: 130px!important; 
    height: 120px!important; 
    max-width: 1000px; 
    min-height: 82px; 

} 
.outer-social-wrapper { 
    float: right; 
}