1

2 つの問題があります。

1) ブラウザ ウィンドウのサイズ変更中、ヘッダー内の画像を 990px​​ ヘッダー内に収めたい。

2) ヘッダー内で (中央の) 画像を揃えるにはどうすればよいですか?

これは、サイズ変更後に得られるものです

オレンジ色の画像が黒色の画像の下に入ります。

彼らはこのままだと思いますが（もちろん990px​​以内）

コードは次のとおりです。

            body {
                background-color: #e8e8e8;
                font-family: Arial, Helvetica, sans-serif;
                font-size:12px;
                padding: 0;
                margin: 0;
            }
            h1 {
                padding: 0px;
                margin: 0px;
            }
            #container {
                margin:0px auto;
                border:0px solid #bbb;
                padding:10px;
                min-width: 990px;
            }
            .white-box {
                width: 180px;
                margin: 0px;
            }
            #main-header {
                border:1px solid #bbb;
                height:98px;
                padding:3px;
                background:#FFF
                min-width: 930px;
            }
            #main-content {
                margin-top:10px;
                padding-bottom:10px;
            }
            #main-body {
                margin-left:10px;
                width:666px;
                height:150px;
            }
            #main-footer {
                margin-top:10px;
                margin-bottom:10px;
                padding:10px;
                border:1px solid #bbb;
            }
            .box {
                padding: 8px;
                border: 1px solid silver;
                -moz-border-radius: 8px;
                -o-border-radius: 8px;
                -webkit-border-radius: 5px;
                border-radius: 8px;
                background-color: #fff;
            }
            .box1 {
                width: 200px;
                float: left;
            }
            .box2 {
                margin-left: 224px;
            }

            div.left {
                width: 200px;
                float: left;
            }

            div.right {
                width: 730px;
                float: right;
                margin-right:3px;
            }
            </style>
            </head>
            <body>
            <div id="main-header">
            <div class="left"><img src="imgn/banners/logo.gif" border="0" alt=""></div>
            <div class="right"><img src="imgn/banners/banner1.gif" border="0" alt=""></div>
            </div>
            <div id="container">

                <div id="main-content">
                    <div class="box box1">
                    left
                    </div>

                    <div class="box box2">
                    <p>Main Bbody 1...</p>
                    </div>
                </div>

                <div id="main-footer">Main Footer</div>
            </div>
            </body>
4

4 に答える 4

0 
<!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>Untitled Document</title>
<style>
body {  background-color: #e8e8e8;                 font-family: Arial, Helvetica, sans-serif;               font-size:12px;                padding: 0;                margin: 0;            }
            h1 {                padding: 0px;                margin: 0px;            }
            #wrapper{width:990px; margin:0 auto;}
            #container {                margin:0px auto;                border:0px solid #bbb;                padding:10px;                width: 990px;            }
            .white-box {                width: 180px;                margin: 0px;            }
            #main-header {                border:1px solid #bbb;                height:98px;               padding:3px;                background:#FFF; width: 990px; margin:0px auto;   }
            #main-content {             margin-top:10px;                padding-bottom:10px;            }
            #main-body {                margin-left:10px;                width:666px;                height:150px;            }
            #main-footer {                margin-top:10px;                margin-bottom:10px;                padding:10px;                border:1px solid #bbb;            }
            .box {                padding: 8px;                border: 1px solid silver;                -moz-border-radius: 8px;                -o-border-radius: 8px;                -webkit-border-radius: 5px;                border-radius: 8px;                background-color: #fff;            }
            .box1 {                width: 200px;                float: left;            }
            .box2 {               float:right; margin-left:0px; width:748px;            }
            div.left {                width: 200px;                float: left;            }
            div.right {                width: 730px;                float: right;                margin-right:3px;            }
            </style>
</head>

<body>
<div id="wrapper">
<div id="main-header">
    <div class="left"><img src="http://img89.imageshack.us/img89/2675/logoxnx.gif" alt="" border="0"></div>
        <div class="right"><img src="http://img199.imageshack.us/img199/9759/banner2b.gif" alt="" border="0"></div>
    </div>
    <div id="container">
        <div id="main-content">
            <div class="box box1">
                left
            </div>

            <div class="box box2">
                <p>Main Bbody 1...</p>
            </div>
            <div style="clear:both;"></div>
        </div>

        <div id="main-footer">Main Footer</div>
    </div>
    </div>
</body>
</html>
于 2013-03-29T08:36:33.170 に答える
0

HTML:

<div id="main-header">
    <div class="left"><img src="imgn/banners/logo.gif" alt="" border="0"></div>
        <div class="right"><img src="imgn/banners/banner1.gif" alt="" border="0"></div>
    </div>
    <div id="container">
        <div id="main-content">
            <div class="box box1">
                left
            </div>

            <div class="box box2">
                <p>Main Bbody 1...</p>
            </div>
            <div style="clear:both;"></div>
        </div>

        <div id="main-footer">Main Footer</div>
    </div>

CSS:

body {
                background-color: #e8e8e8;
                font-family: Arial, Helvetica, sans-serif;
                font-size:12px;
                padding: 0;
                margin: 0;
            }
            h1 {
                padding: 0px;
                margin: 0px;
            }
            #container {
                margin:0px auto;
                border:0px solid #bbb;
                padding:10px;
                min-width: 990px;
            }
            .white-box {
                width: 180px;
                margin: 0px;
            }
            #main-header {
                border:1px solid #bbb;
                height:98px;
                padding:3px;
                background:#FFF
                min-width: 933px;
            }
            #main-content {
                margin-top:10px;
                padding-bottom:10px;
            }
            #main-body {
                margin-left:10px;
                width:666px;
                height:150px;
            }
            #main-footer {
                margin-top:10px;
                margin-bottom:10px;
                padding:10px;
                border:1px solid #bbb;
            }
            .box {
                padding: 8px;
                border: 1px solid silver;
                -moz-border-radius: 8px;
                -o-border-radius: 8px;
                -webkit-border-radius: 5px;
                border-radius: 8px;
                background-color: #fff;
            }
            .box1 {
                width: 200px;
                float: left;
            }
            .box2 {
               float:right; margin-left:0px; width:748px;
            }

            div.left {
                width: 200px;
                float: left;
            }

            div.right {
                width: 730px;
                float: right;
                margin-right:3px;
            }
于 2013-03-28T22:30:06.383 に答える
0

background-image画像を使用する代わりに、CSSプロパティを使用します。このようにして、サイズ変更後のウィンドウの新しいサイズに基づいて、コンテナーdivの幅を外側の div の幅のパーセンテージとして設定できます。container

于 2013-03-28T20:37:21.997 に答える