问题2 Divs未对齐正确

Im有一个问题，正确设置Schedule Div和PhoneNumber Div。我试过添加.clear和float标签。

http://www.virtualpetstore.com

enter image description here

的2周的div 应该出现如在该图中，但是当我观看此具有较大的显示器，2周的div是遥远向右

我试图将花车更改为正确的位置，然后将位置更改为相对，这完全打破了页面。

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

来源

2011-07-05 Paul

更简单和更简洁的方法是将其div s和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/

来源

2011-07-05 16:39:35

我想我通过删除左旁联系人按钮和电话号码，然后设置其浮动而右的一点点进步HTTP ：//jsfiddle.net/NinjaSk8ter/Cm7jv/5/ – Paul

在＃接触按钮的保证金503的问题。应该是0

来源

2011-07-05 16:38:42 M3NTA7

问题2 Divs未对齐正确

回答

相关问题