CSS：Word在調整窗口大小時自動換行？響應設計

編輯：最大寬度：760px修復了我的縮放問題！感謝那！但是現在我的導航出現了一個新問題，在小窗口中也是如此......我希望它是一個固定的大小。CSS：Word在調整窗口大小時自動換行？響應設計

嘿傢伙，所以我正在研究我的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？如果有人能夠幫助，那將是驚人的。謝謝！

來源

2013-12-11 user3089329

你能指定最新的錯誤嗎？我似乎不明白哪裏出了問題。 btw在你的CSS中，對於你的類optcenter，右括號應該是一個大括號。 – iCezz

divwrapper的固定寬度爲760px。這對於響應式設計並不好。取而代之的是，使用max-width:760px。這應該讓你開始。

哦，還有，爲什麼你在文章造型中有margin-top:-400px？

來源

2013-12-11 02:55:41 BLiu1

多數民衆贊成把整個文章增加400px，因此它顯示了一半的頁面。我想這是直接複製和粘貼的問題。他/她應該只是採取所需的代碼。 – iCezz

margin-top：-400px的原因是，當將窗口縮小爲小尺寸以使用小布局樣式表時，它在我的導航位於頂部和我的內容之間創建了一個巨大的間隙，它始終不移動我刪除了我的光學中心圖像後。這是將文本向上移動的唯一方法... – user3089329

CSS：Word在調整窗口大小時自動換行？響應設計

回答

相關問題