Question

好的，这是我的问题的图像.. 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>

Answer 1

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

现在改为你的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


}

Answer 2

<强> Here is a demo

我所做的只是移除您应用的所有padding以及border。

我给了两个div width:1100px。

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

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

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

Answer 3

.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宽度。

宽度计算为填充+边框+宽度

CSS问题 - 对齐困难

3 个答案: