CSS：调整窗口大小时自动换行？ 响应式设计

Question

编辑：最大宽度：760px修复了我的缩放问题！ 感谢那！ 但是，在小窗口比例尺中也出现了一个新问题，现在是我的导航...我希望它是固定大小的。

大家好，我正在html类中研究响应式设计，我们必须为大型布局，中型布局和小型布局制作一个网站。 大的和中等的都很容易，但是对于小布局，因为窗口很小，所以我试图使单词自动换行，因此您必须向下滚动并且文本适合窗口。 我无法为自己的生活弄清楚如何做到这一点。

我有一个有效的参考，我什至直接复制并粘贴了代码，但仍然不起作用。 这是所有正文，文章和需要包装的东西。 它让我发疯。 CSS验证程序没有错误，所以我很困惑。

我发现的导航是完美的，这只是促销课程中给我带来麻烦的事情。

这是我的CSS代码：

header a.logo {
    width: 105px; height: 40px;
    top: 16px; right: 15px;
    background-image: url(../images/logo_small.png);
    }

article { padding: 20px 20px 10px 20px;
        margin-top:-400px;
        word-wrap:break-word;
        }

nav {
    display: block;
    position: static;
    padding: 10px 0px 10px 0px;
    background-color: #000000;
}

nav a {
    color: #FFFFFF;
    display: block;
    margin: 15px;
    padding: 9px;
    border: 1px solid #FFFFFF;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
}

nav a:hover { color: #ED1C24; background-color:#fff; }

.promo_container {padding: 0px;}

.promo_container .promo {
    width: auto;
    float: none;
    padding: 10px 0px 0px 0px;
    background-position: 20px 13px;
    border-top: 1px solid #ccc;
}

.promo_container .promo .content { padding: 0px 20px 5px 90px; }


footer { border-top: 1px solid #a6abc5; }
article { padding: 20px 20px 10px 20px; }

body {background-image: none;}

.wrapper{width:760px;
        margin:auto;
        position:relative;
        background-color:#ffffff;
        padding-left:10px;
        padding-right:10px;
        border: 3px #000;
        -webkit-border-radius:20px; 
        -moz-border-radius:20px; 
        border-radius:20px; 
        }

.optcenter{background-image:none;)

和HTML代码：

<div class="wrapper">

<article>
<center><h2>Welcome to Redline Performance</h2></center>
<p>Redline Performance Racing is your one stop shop for all things speed. We offer a full fledged racing school with the fastest cars, and visit the most famous race tracks. Experience a thrill ride like never before, only from Redline Performance Racing.</p>
</article>

<div class="promo_container">
    <div class="promo one">
        <div class="content">
            <h3>Speed</h3>
            <p>At Redline Performance Racing, we only offer the fastest cars,     capable of reaching the fastest speeds.</p>
            <p><a class="cta" href="cars_tracks.html">Visit our Cars</a></p>
        </div>
    </div>
    <div class="promo two">
        <div class="content">
            <h3>Safety</h3>
            <p>blah</p>
            <p><a class="cta" href="">Visit our blog</a></p>
        </div>
    </div>
    <div class="promo three">
        <div class="content">
            <h3>Thrills</h3>
            <p>Are you ready for the ultimate thrill ride?</p>
            <p><a class="cta" href="">Visit our blog</a></p>
        </div>
    </div>
    <div class="clear-fix"></div>
</div>
<footer>
<p>&copy; RedLine Performance Racing</p>
</footer>

我假设问题出在CSS中？ 如果有人可以帮助，那将是惊人的。 谢谢！

Answer 1

带类wrapper的div的固定宽度为760px。 这对响应式设计不利。 而是使用max-width:760px 。 那应该让您开始。

哦，还有，为什么您在文章样式中具有margin-top:-400px ？