0

好的，这是我的问题的图像.. https://www.dropbox.com/s/s30wathhiqpky9e/help.JPG

问题是这两个都是 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>
4

3 回答 3

0 
.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 有边框。填充也将宽度增加了 10 像素。现在您可以删除填充并将 2px 宽度添加到 div_nav_bar 或添加 12px 宽度。

宽度计算padding+border+width

于 2012-07-06T10:10:17.097 回答
0

这是一个演示。

我所做的只是删除padding您应用的所有内容以及border.

我给width:1100px了两个div。

问题是当你应用padding到一个元素时，它就width变成了width+padding-left+padding-right.

因此 div 似乎看起来更宽。在你的情况下，你给了padding 和1px border给你的 upper div(div_top)。

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

于 2012-07-06T08:56:08.507 回答
0

嘿现在的问题是你习惯了填充+边框

现在像这样更改为您的CSS

你#div_nav_bar width是总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-06T08:51:25.903 回答