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; 
}

配置の問題は、一方に境界線があり、もう一方に境界線があるため、2つのdivの幅が異なることです。また、パディングにより幅が10px増加します。これで、パディングを削除してdiv_nav_barに2px幅を追加するか、12px幅を追加できます。

幅は、パディング+ボーダー+幅で計算されます

于 2012-07-06T10:10:17.097 に答える
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 に答える
0

これがデモです。

私がしたことは、paddingあなたが適用したすべてとまたを削除することですborder。

私はwidth:1100px両方のdivに与えました。

問題は、要素に適用paddingすると、その要素がにwidthなりwidth+padding-left+padding-rightます。

したがって、divはより広く表示されるように見えます。あなたの場合、あなたはあなたのアッパーにpadding 与えました。1px borderdiv(div_top)

したがって、それは+ +++widthとして計算されました。1100pxpadding-leftpadding-rightborder-leftborder-right

于 2012-07-06T08:56:08.507 に答える