Question

我有两个问题;

1）我希望在浏览器窗口调整大小时，标题中的图像保留在我的990px标题内。

2）如何使用标题对齐（中间）图像？

橙色图像在黑色图像下。

While they suppose to stay like this (within 990px of course)

以下是代码：

            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>

Answer 1

使用CSS background-image属性而不是使用图像。这样，您可以根据调整大小后窗口的新大小，将容器div的宽度设置为外部container div宽度的百分比。

Answer 2

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

Answer 3

<!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>

Answer 4

正如Pete在另一个主题中所建议的那样：你需要将＃main-header的最小宽度增加到950px左右

CSS - 如何在浏览器窗口大小调整期间将图像保留在容器中？

4 个答案: