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 ？