Question

在我的示例中，我需要在浏览器窗口扩展时保持标题和主体拉伸到全屏（现在可以正常工作）。但是，当浏览器窗口缩小时，橙色图像从标题向下跳跃并部分地在黑色图像下面。知道如何保持橙色图像到位吗？

我的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-color: #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 {
                float: left;
            }
            div.right {
                float: right;
                margin-right:3px;
            }

HTML：

            <div id="main-header">
                <div class="left"><img src="http://img89.imageshack.us/img89/2675/logoxnx.gif" border="0" alt=""></div>
                <div class="right"><img src="http://img199.imageshack.us/img199/9759/banner2b.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 Body...</p>
                    </div>
                    <div style="clear:both;"></div>
                </div>

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

Answer 1

您需要将min-width的{{1}}增加到约#main-header

http://jsfiddle.net/RFMBM/2/

CSS - 在浏览器窗口大小调整期间出现问题

1 个答案: