css - 2 个 Div 未正确对齐的问题

Question

我有 2 个 div 嵌套在一个父 div 中。

我在正确设置 Schedule Div 和 PhoneNumber Div 时遇到问题。我试过添加 .clear 和 float 标签。

http://www.virtualpetstore.com

2 个 Div 应该显示在插图中，但是当我用更大的显示器查看时，2 个 Div 偏向右侧

我尝试将 float 更改为右侧，然后将位置更改为完全破坏页面的相对位置。

*{ margin:0; padding:0 }
body {
    background-color: #9EB0C8;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 62.5%;
}
#top-wrap {
    height: 133px;
    margin: 0 auto;
    width: 882px;
    position: relative;
    z-index:100;
    background-color: Yellow;
}
#head-logo {
    height: 133px;
    width: 214px;
    float:left;
    position:relative;
    /*margin: 0px 0 0 58px;*/
    background: url("/images/Home/Logo7.png") no-repeat scroll 0 0 transparent;
    background-position:bottom;
    background-color: Green;
}
#head-title {
    height: 55px;
    width: 385px;
    float:left;
    position:relative;
    margin: 9px 0 0 18px;
    background: url("/images/Home/LogoTitle1.png") no-repeat scroll 0 0 transparent;
    background-color:Red;
}  
#contact-button {
    height: 28px;
    width: 165px;
    float:left;
    position:absolute;
    margin: 7px 0 0 715px;
    background-color:orange;
}
#contact-phone {
    height: 20px;
    width: 134px;
    margin: 28px 0 0 745px;
    float:left;
    position:absolute;
    color:#FFFFFF;
    font-family: Arial,Impact,Impact5,Charcoal6,sans-serif;
    font-size: 2.1em;
    text-align: right;
    background-color:Blue;
}    
a.contact {
    background-image: url("/images/Home/RapidButtonSprite4.png"); 
    background-position:left bottom; /* 0px -27px; */ 
    display: block;
    font-size: 11px;
    text-align: center;
    width: 165px;
    height: 27px;   
}
a.contact:hover {
    background-position:left top; /*0px 0px;*/
} 
#navigation-primary {
    float:left;
    position:relative;
    margin: 18px 0 0 4px;
}

这是相关的 HTML:

<div id="top-wrap">
    <div id="head-logo">
        <a href="/"></a>
    </div>
    <div id="head-title">
    </div>
    <div id="contact-button">
        <div id='contact-form'>
            <a class="contact" href="#"></a>
        </div>
    </div>
    <br style="clear: right" />
    <div id="contact-phone">
        703-425-6000
    </div>
    <div id="navigation-primary">
    ....
    </div>
</div>

Answer 1

更简单、更简洁的方法是切换 div 的顺序并将它们 float 到右边。所以

<div id="contact-button">
    <div id='contact-form'>
        <a class="contact" href="#"></a>
    </div>
</div>

<div id="head-title">
</div>

和

#head-title {
    height: 28px;
    width: 165px;
    float:right;
    margin: 0;
    background-color:Red;
}  
#contact-button {
    height: 28px;
    width: 165px;
    float:right;
    margin: 0;
    background-color:orange;
}

http://jsfiddle.net/jasongennaro/Cm7jv/1/