html - 如何让网站不与CSS崩溃

Question

有没有一种方法可以更改此 CSS，以便在调整窗口大小时文本不会折叠并创建水平滚动条？我尝试添加一个包装 div 并在其上设置宽度，但随后带有图像和颜色的完整背景效果也崩溃了。

http://2012dminominees.edulence.com/

Answer 1

CSS/HTML 中的几处更改:

我会在 .inner div 中添加功能区

<div id="header">
    <div class="inner">
        <img src="./nominee hub_files/DMI-logo.png" height="140px" width="140px">
        <h1>nominee hub</h1>        
        <div id="ribbon">
            <img src="./nominee hub_files/ribbon.png">
        </div>
    </div><!--END inner -->
</div><!--END header -->

您走在正确的轨道上，只需进行一些调整:

将丝带放在正确的位置:

.inner {
    width: 1050px;
    margin: 0 auto;
    min-width: 1050px;
    position:relative;
}

重叠问题:

#ribbon {
    top:0;
    position: absolute;
    right: 200px;
    z-index:0;
}

#header h1 {
    text-transform: lowercase;
    font-size: 72px;
    margin-left: 197px;
    color: #f8f9fa;
    position:relative;
    z-index:1;
}

保持中间图像居中:

#main {
    padding-top: 369px;
    padding-bottom: 27px;
    background: url('main-bg.png') 50% -1px no-repeat;
}

基本上，这会使您网站的内容保持 1050 像素的宽度，并在浏览器窗口宽度超过该宽度时消除栏，同时保持页面外观相同。