对齐使用float的父div内的2个子div：left和float：right

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; 
}