Question

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

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

http://www.virtualpetstore.com

enter image description here

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>

Answer 1

在#contact-button中你的边距503就是问题所在。应为0

Answer 2

更简单，更清晰的方法是将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/

问题2 Div没有正确对齐

2 个答案: