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問題 - 難以對齊

回答

相關問題