定位兩個彼此相鄰的元素，浮動將使得IMG消失

Question

我是新的設計，我需要兩個IMGS放在彼此的旁邊，與之間的一些空間。 這是目前我的網站看起來是什麼：關於切斷別擔心，它被假設是這樣。我需要準備這個，讓我後來添加到它，所以我不能用絕對位置或任何將圖像鎖定到位應答元件。

兩個圖像都在125像素相同的高度。當我向左或向右浮動圖片時，圖片在我的網頁邊緣出現95％的截斷。我不明白爲什麼它被對方下的地方，似乎有足夠的空間，第二圖像是在同一水平上。

繼承人我到目前爲止：「navi」是我的容器或包裝... mainlogo和slidertop我曾經實驗過，目前每個下面都沒有代碼。

<div id="navi"> 
<div id="mainlogo"><header><a href="#"></a></header></div> 
<div id="slidertop"><header id="topad"><a href="#"></a></header></div> 
<div style="clear:both"></div> 
</div> 

#navi{ 
height: 130px; 
} 
#mainlogo{ 
} 
#slidertop{ 
} 

這是林怎麼叫我的圖片：

header{ 
background: url(../Images/logo1.gif) no-repeat 15% 0px; 
border: none; 
height: 125px; 
top:100px; 
} 
header#topad{ 
background: url(../Images/TopAd.gif) no-repeat 80% 0px; 
border: none; 
height: 125px; 
vertical-align: middle; 
} 

Answer 1

在您發佈的原代碼，我想的div是可用的寬度均爲100％，他們將出現在頁面上彼此頂部。你可以看到自己這一點，如果你暫時補充圍繞每個格彩色邊框，所以你可以看到他們在哪裏。

如果你希望他們並排，你必須添加樣式來做到這一點。例如，你可以把它們飄浮並指定寬度：

header { width: 45%; float: left; } 
header#topad { float: right;} 

如：http://codepen.io/anon/pen/ynuoa

Answer 2

您是否嘗試過浮動的div？

#mainlogo{ 
    float: left; 
} 
#slidertop{ 
    float: left; 
}