CSS问题 - 难以对齐

好吧，这里的我的问题的形象.. https://www.dropbox.com/s/s30wathhiqpky9e/help.JPG CSS问题 - 难以对齐

的事情是，这两个是指div，宽度相同，但他们就是不在一起对齐！我该如何解决这个问题。我要的是它们对齐一起，就好像它们是相同的大小...这里的HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Welcome</title> 

    <style type="text/css"> 
    .div_top { 
     height:50px; 
     padding:5px; 
     margin:0 auto; 
     width:1100px; 
     border:dotted; 
     border-width:1px; 
    } 
    .div_top_ads { 
     float:right; 
     position:relative; 

    } 

    #div_nav_bar{ 
     width:1100px; 
     height:30px; 
     margin:auto; 
     opacity:10%; 
     margin-top:auto; 
     background-color:#CCC; 

    } 
    body { 
     margin-top: 0px; 
    } 

    .divme { 
     width:100%; 

    } 
    </style> 
    </head> 

    <body> 


    <div class="div_top"> hello 

     <div class="div_top_ads">Content for New Div Tag Goes Here</div> 

    </div> 

    <div class="divme"> 
    <div id="div_nav_bar">yello!</div> 
    </div> 

    </body> 
    </html>

来源

2012-07-06 devxweb

第一次尝试从两个divsand检查移除填充和保证金，如果他们是正确的，我认为这是因为填充和您申请保证金。 – freebird 2012-07-06 08:50:39

.div_top { 
    height:50px; 

    margin:0 auto; 
    width:1100px; 
    border:dotted; 
    border-width:1px; 
} 
#div_nav_bar{ 
    width:1102px; 
    height:30px; 
    margin:auto; 
    opacity:10%; 
    margin-top:auto; 
    background-color:#CCC; 
border-width:1px; 
}

与对准的问题是的两个div是在不同的宽度，因为一个具有边界和其他DNT有边框。也填充宽度增加10px。现在您可以删除填充并将2px宽度添加到div_nav_bar或添加12px宽度。

宽度计算填充+边框+宽

来源

2012-07-06 10:10:17 Chris

嘿，现在的问题是你用来填充+边框

现在改变你的CSS像这

您#div_nav_barwidth是总1100px width + 10px padding left of right + 2px border现在总宽度width :1112px

#div_nav_bar{ 
    width:1100px; // change to width:1100 + 10 + 2px; // width:1112px 


}

来源

2012-07-06 08:51:25

Here is a demo。

我所做的只是删除您申请的所有padding以及border。

我给width:1100px两个div。

问题是，当您将padding应用于某个元素时，其width变为width+padding-left+padding-right。

因此，div似乎显得更宽。在您的情况下，您将padding和1px border分配给您的上限div(div_top)。

因此其width计算为1100px + padding-left + padding-right + border-left + border-right。

来源

2012-07-06 08:56:08 freebird

CSS问题 - 难以对齐

回答

相关问题