0

在我的示例中，当浏览器窗口展开时（现在可以使用），我需要保持标题和主体伸展到全屏。但是，当浏览器窗口缩小时，橙色图像会从标题跳下并部分位于黑色图像下方。知道如何保持橙色图像到位吗？

这是我的例子：http: //jsfiddle.net/RFMBM/

我的 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>
4

1 回答 1

2

你需要增加min-widthto#main-header左右950px

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

于 2013-04-03T14:11:23.117 回答