css - 2 Divs无法正确对齐的问题

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

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

http://www.virtualpetstore.com



2 Divs应该如插图中所示，但是当我使用较大的显示器查看时，2 Divs向右偏离

我试图将浮标更改为右侧，然后将其位置更改为相对位置，从而完全破坏了页面。

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

这是Relevent 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>

最佳答案

一种更简单，更简洁的方法是将div的顺序和float的顺序切换到right。所以

<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/

关于css - 2 Divs无法正确对齐的问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/6585835/