圖片被越來越推在div其包裹在

Question

諾貝爾獎的人誰可以弄清楚爲什麼第二圖像是div其包裹在被推到外面的外

我認爲我所做的是非常簡單的：

<div class="outerdiv" id="headerbox"> 
    <div id="uwlogo"> 
     <img src="uwlogo.png" height="50px"\> 
    </div> 
    <div id="JaminWEB"> 
     <h1>JaminWEB</h1> 
    </div> 
    <div id="rainer"> 
     <img src="rainer.jpg" height="50px"\> 
    </div> 
</div> 

與相應的樣式代碼

#uwlogo 
{ 
    float: left; 
} 

#JaminWEB 
{ 
    float: center; 
} 
#rainer 
{ 
    float: right; 
} 
h1 
{ 
    color: #FFF; 
    font-weight: 400; 
    text-align: center; 
    margin: auto; 
    padding: auto; 
} 

JFiddle的聯繫，因爲我知道有人會要求一個：http://jsfiddle.net/u7PJj/

Answer 1

要回答爲什麼它的發生是許多的事情：

1. 浮動：中心是無效的，所以它不浮
2. 你#JaminWeb佔用了100 ％寬度從而迫使你的第三個浮動元素（下一個元素）包裝和浮動權利（在下一行）
3. 您的headerBox設置爲50px的高度，並且float不會更改這些尺寸，所以我t似乎在其容器外浮動。

要解決它，我建議去用絕對定位而不是浮動。這樣，您的JaimenWEB div就可以居中放置並放置全部寬度，並將徽標放置在其周圍。

#headerbox 
{ 
    width: 80%; 
    height: 50px; 
    position: relative; 
} 
#uwlogo 
{ 
    position: absolute; 
    left: 5px; 
    top: 5px; 
} 

#JaminWEB 
{ 
    text-align: center; 
} 
#rainer 
{ 
    position: absolute; 
    right: 5px; 
    top: 5px; 
} 

我已經更新了你的提琴：http://jsfiddle.net/u7PJj/1/

Answer 2

嘗試這個

<div id="uwlogo"> 
     <img src="uwlogo.png" height="50px" /> 
    </div> 
<div id="rainer"> 
     <img src="rainer.jpg" height="50px" /> 
    </div> 
<div id="JaminWEB"> 
     <h1>JaminWEB</h1> 
    </div>