1

我有两个问题；

1) 我希望标题中的图像在浏览器窗口调整大小期间保持在我的 990px​​ 标题内。

2）如何将（中间）图像与标题对齐？

这是我调整大小后得到的

橙色图像位于黑色图像之下。

虽然他们想保持这样（当然在 990 像素以内）

这是代码：

            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

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

于 2013-03-28T20:37:21.997 回答
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 
<!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

正如皮特在另一个线程中所建议的那样：您需要将#main-header 的最小宽度增加到大约 950px

于 2013-04-03T14:43:27.260 回答