使用float：left和float：right在父div內對齊2個子div時出現問題

Question

我知道答案很簡單，但我似乎無法弄清楚。

<div id="header">
<div id="30">
    <img src="../images/logo.png" width="97" height="97" />
</div>
<div id="company">
    <img src="../images/company.png" width="370" height="97" />
</div>
<div style="clear: both;"></div>
</div>

#header {
width:960px;
background-color:#e9e9e9;
margin-left:auto;
margin-right:auto;
padding-bottom:15px;
overflow:hidden;
}
#30 {
float:left;
}
#company {
float:right;
}

我不知道如何從jsfiddle發布代碼。 結果是將“ 30” div對齊到父級的左側，將“公司” div對齊到父級的左側，但是將其放在一行中。

Answer 1

您的第一個問題是#30不是有效的ID-當第一個字符是數字時，CSS不喜歡它。 嘗試#thirty 。

這是一個JSBin，顯示了它的工作原理，盡管帶有JSBin徽標。 http://jsbin.com/IJaseKa/1

Answer 2

CSS在以數字開頭的ID時遇到問題。 請改用帶字母的東西。

這是工作代碼

http://jsfiddle.net/3bSVw/

<div id="header">
    <div id="other">
        <img src="../images/logo.png" width="97" height="97" />
    </div>
    <div id="company">
        <img src="../images/company.png" width="370" height="97" />
    </div>
    <div style="clear: both;"></div>
</div>




#header {
    width:960px;
    background-color:#e9e9e9;
    margin-left:auto;
    margin-right:auto;
    padding-bottom:15px;
    overflow:hidden;
}
#other {
    float:left;    
}
#company {
    float:right;
}