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与父项左侧对齐，“company”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;
}

无法使用float：left和float：right在父div中对齐2个子div

2 个答案: