2016-04-18 46 views
0

enter image description here我遇到了一個問題,我似乎無法解決, 在我的23「顯示器的頁面顯示的內容,我的筆記本電腦屏幕14」如何不顯示所有的內容,我可以滾動一點,但不是所有的方式看到頁面的res,任何暴徒?其餘的頁面不滾動下來

body { 
 
    \t font-family: Arial, Verdana, sans-serif; 
 
    \t background-color: #141414; 
 
    \t color: #fff; 
 
    \t font-size: 90%; 
 
    \t margin: 0px; 
 
    \t padding: 0px; 
 
    \t 
 
    } 
 

 
    img#logo { 
 
    \t width: 250px; 
 
    \t position: relative; 
 
    \t bottom: 0px; 
 
    \t left: 10px; 
 
    \t border: none; 
 
    \t 
 
    } 
 

 
    div#nav { 
 
    \t background-color: rgba(7, 7, 7, 0.7); 
 
    \t box-shadow: 0px 3px 10px #000; 
 
    \t height: 70px; 
 
    \t position: fixed; 
 
    \t top: 0px; 
 
    \t left: 0px; 
 
    \t padding: 10px; 
 
    \t margin: 0px; 
 
    \t width: 100%; 
 
    \t 
 
    } 
 

 
    div#division { 
 
    \t margin-top: 120px; 
 
    } 
 

 
    .octo { 
 
    \t position: fixed; 
 
    \t right: 0px; 
 
    \t width: 100%; 
 
    \t height: 100%; 
 
    \t margin-bottom: 100px; 
 
    } 
 

 
    .wraper { 
 
    \t margin: 10px auto 10px auto; 
 
    \t width: 1200px; 
 
    \t padding-left: 100px; 
 

 
    \t 
 
    } 
 

 
    .poster { 
 
    \t display: inline-block; 
 
    \t width: 273px; 
 

 
    } 
 

 
    figure { 
 

 
    \t background-color: rgba(106, 192, 69, 0.7); 
 
    \t border-radius: 5px; 
 
    \t padding-left: 3px; 
 
    } 
 

 
    img { 
 
    \t 
 
    } 
 

 
    figcaption { 
 
    \t font-weight: bold; 
 
    \t padding-left: 5px; 
 
    } 
 

 
    figure:hover { 
 
    \t background-color: #1ba6e0; 
 
    \t border-radius: 5px; 
 
    }
<!DOCTYPE html> 
 
    <html> 
 
    <head> 
 
    \t <title>Rewind HD</title> 
 
    \t <link rel="stylesheet" type="text/css" href="CSS/rewind hd.css"> 
 
    \t <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    </head> 
 
    <body> 
 
    <div id="nav"> 
 
    \t <img id="logo" src="images/REWIND HD web.png"> 
 
    </div> 
 
    <div id="division"></div> 
 

 
    \t <div class="wraper"> 
 

 
    \t <div class="poster"> 
 
    \t <figure> 
 
    \t \t <figcaption>James Bond<br /> Octopussy</figcaption> 
 
    \t \t <a href="james Bond.html"><img src="images/octopussy.jpg"></a> 
 
    \t </figure> 
 
    \t </div> 
 

 
    \t <div class="poster"> 
 
    \t \t <figure> 
 
    \t \t <figcaption>James Bond<br /> A View To A Kill</figcaption> 
 
    \t \t <a href="james Bond A view to kill.html"><img src="images/JBAVTK.jpg"></a> 
 
    \t \t </figure> 
 
    \t </div> 
 

 
    \t <div class="poster"> 
 
    \t \t <figure> 
 
    \t \t <figcaption>James Bond<br /> For Your Eyes Only</figcaption> 
 
    \t \t <a href="James Bond For your eyes only.html"><img src="images/James Bond For Your Eyes Only.jpg"></a> 
 
    \t \t </figure> 
 
    \t </div> 
 

 
    \t <div class="poster"> 
 
    \t \t <figure> 
 
    \t \t <figcaption>James Bond<br /> Licence To Kill</figcaption> 
 
    \t \t <a href="James Bond For your eyes only.html"><img src="images/James Bond Licence To Kill.jpg"></a> 
 
    \t \t </figure> 
 
    \t </div> 
 

 
    \t <div class="poster"> 
 
    \t \t <figure> 
 
    \t \t <figcaption>James Bond<br /> Moonraker</figcaption> 
 
    \t \t <a href="James Bond Moonraker.html"><img src="images/James Bond Moonraker.jpg"></a> 
 
    \t \t </figure> 
 
    \t </div> 
 

 
    \t <div class="poster"> 
 
    \t \t <figure> 
 
    \t \t <figcaption>James Bond<br /> Never Say Never Again</figcaption> 
 
    \t \t <a href="James Bond Never Say Never Again.html"><img src="images/James Bond Never Say Never Again.jpg"></a> 
 
    \t \t </figure> 
 
    \t </div> 
 

 
    \t <div class="poster"> 
 
    \t \t <figure> 
 
    \t \t <figcaption>James Bond<br /> Majestys Secret Service</figcaption> 
 
    \t \t <a href="James Bond On Her Majestys Secret Service.html"><img src="images/James Bond On Her Majestys Secret Service.jpg"></a> 
 
    \t \t </figure> 
 
    \t </div> 
 

 
    \t <div class="poster"> 
 
    \t \t <figure> 
 
    \t \t <figcaption>James Bond<br /> The Living Daylights</figcaption> 
 
    \t \t <a href="James Bond The Living Daylights.html"><img src="images/James Bond The Living Daylights.jpg"></a> 
 
    \t \t </figure> 
 
    \t </div> 
 

 
    \t <div class="poster"> 
 
    \t \t <figure> 
 
    \t \t <figcaption>James Bond<br /> The Spy Who Loved</figcaption> 
 
    \t \t <a href="James Bond The Spy Who Loved.html"><img src="images/James Bond The Spy Who Loved.jpg"></a> 
 
    \t \t </figure> 
 
    \t </div> 
 

 
    \t <div class="poster"> 
 
    \t \t <figure> 
 
    \t \t <figcaption>ames Bond<br /> Licence To Kill</figcaption> 
 
    \t \t <a href="James Bond For your eyes only.html"><img src="images/James Bond Licence To Kill.jpg"></a> 
 
    \t \t </figure> 
 
    \t </div> 
 

 
    \t <div class="poster"> 
 
    \t \t <figure> 
 
    \t \t <figcaption>James Bond<br /> Moonraker</figcaption> 
 
    \t \t <a href="James Bond Moonraker.html"><img src="images/James Bond Moonraker.jpg"></a> 
 
    \t \t </figure> 
 
    \t </div> 
 

 
    \t <div class="poster"> 
 
    \t \t <figure> 
 
    \t \t <figcaption>James Bond<br /> Never Say Never Again</figcaption> 
 
    \t \t <a href="James Bond Never Say Never Again.html"><img src="images/James Bond Never Say Never Again.jpg" class="background_color"></a> 
 
    \t \t </figure> 
 
    \t </div> 
 

 
    \t <div class="poster"> 
 
    \t \t <figure> 
 
    \t \t <figcaption>ames Bond<br /> Licence To Kill</figcaption> 
 
    \t \t <a href="James Bond For your eyes only.html"><img src="images/James Bond Licence To Kill.jpg"></a> 
 
    \t \t </figure> 
 
    \t </div> 
 

 
    \t <div class="poster"> 
 
    \t \t <figure> 
 
    \t \t <figcaption>James Bond<br /> Moonraker</figcaption> 
 
    \t \t <a href="James Bond Moonraker.html"><img src="images/James Bond Moonraker.jpg"></a> 
 
    \t \t </figure> 
 
    \t </div> 
 

 
    \t <div class="poster"> 
 
    \t \t <figure> 
 
    \t \t <figcaption>James Bond<br /> Never Say Never Again</figcaption> 
 
    \t \t <a href="James Bond Never Say Never Again.html"><img src="images/James Bond Never Say Never Again.jpg" 
 

 
    \t </figure> 
 
    \t </div> 
 
    </div> 
 
    </body> 
 
    </html>

***strong text*** 
+1

這是'ok'我 – Pedram

回答

0

我想你想是這樣的:首先 ,改變wrapperwidth85%爲有液體包裝。 然後將float:left添加到.poster類。 的代碼是在這裏(你有一點點響應頁):

<!DOCTYPE html> 
    <html> 
    <head> 
     <title>Rewind HD</title> 
     <link rel="stylesheet" type="text/css" href="CSS/rewind hd.css"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 

     <style> 



    body { 
     font-family: Arial, Verdana, sans-serif; 
     background-color: #141414; 
     color: #fff; 
     font-size: 90%; 
     margin: 0px; 
     padding: 0px; 

    } 

    img#logo { 
     width: 250px; 
     position: relative; 
     bottom: 0px; 
     left: 10px; 
     border: none; 

    } 

    div#nav { 
     background-color: rgba(7, 7, 7, 0.7); 
     box-shadow: 0px 3px 10px #000; 
     height: 70px; 
     position: fixed; 
     top: 0px; 
     left: 0px; 
     padding: 10px; 
     margin: 0px; 
     width: 100%; 

    } 

    div#division { 
     margin-top: 120px; 
    } 

    .octo { 
     position: fixed; 
     right: 0px; 
     width: 100%; 
     height: 100%; 
     margin-bottom: 100px; 
    } 

    .wraper { 
     margin: 10px auto 10px auto; 
     width: 85%; 
     padding-left: 100px; 


    } 

    .poster { 
     display: inline-block; 
     width: 273px; 
     float:left; 

    } 

    figure { 

     background-color: rgba(106, 192, 69, 0.7); 
     border-radius: 5px; 
     padding-left: 3px; 
    } 

    img { 

    } 

    figcaption { 
     font-weight: bold; 
     padding-left: 5px; 
    } 

    figure:hover { 
     background-color: #1ba6e0; 
     border-radius: 5px; 
    } 







     </style> 


    </head> 
    <body> 
    <div id="nav"> 
     <img id="logo" src="images/REWIND HD web.png"> 
    </div> 
    <div id="division"></div> 

     <div class="wraper"> 

     <div class="poster"> 
     <figure> 
      <figcaption>James Bond<br /> Octopussy</figcaption> 
      <a href="james Bond.html"><img src="images/octopussy.jpg"></a> 
     </figure> 
     </div> 

     <div class="poster"> 
      <figure> 
      <figcaption>James Bond<br /> A View To A Kill</figcaption> 
      <a href="james Bond A view to kill.html"><img src="images/JBAVTK.jpg"></a> 
      </figure> 
     </div> 

     <div class="poster"> 
      <figure> 
      <figcaption>James Bond<br /> For Your Eyes Only</figcaption> 
      <a href="James Bond For your eyes only.html"><img src="images/James Bond For Your Eyes Only.jpg"></a> 
      </figure> 
     </div> 

     <div class="poster"> 
      <figure> 
      <figcaption>James Bond<br /> Licence To Kill</figcaption> 
      <a href="James Bond For your eyes only.html"><img src="images/James Bond Licence To Kill.jpg"></a> 
      </figure> 
     </div> 

     <div class="poster"> 
      <figure> 
      <figcaption>James Bond<br /> Moonraker</figcaption> 
      <a href="James Bond Moonraker.html"><img src="images/James Bond Moonraker.jpg"></a> 
      </figure> 
     </div> 

     <div class="poster"> 
      <figure> 
      <figcaption>James Bond<br /> Never Say Never Again</figcaption> 
      <a href="James Bond Never Say Never Again.html"><img src="images/James Bond Never Say Never Again.jpg"></a> 
      </figure> 
     </div> 

     <div class="poster"> 
      <figure> 
      <figcaption>James Bond<br /> Majestys Secret Service</figcaption> 
      <a href="James Bond On Her Majestys Secret Service.html"><img src="images/James Bond On Her Majestys Secret Service.jpg"></a> 
      </figure> 
     </div> 

     <div class="poster"> 
      <figure> 
      <figcaption>James Bond<br /> The Living Daylights</figcaption> 
      <a href="James Bond The Living Daylights.html"><img src="images/James Bond The Living Daylights.jpg"></a> 
      </figure> 
     </div> 

     <div class="poster"> 
      <figure> 
      <figcaption>James Bond<br /> The Spy Who Loved</figcaption> 
      <a href="James Bond The Spy Who Loved.html"><img src="images/James Bond The Spy Who Loved.jpg"></a> 
      </figure> 
     </div> 

     <div class="poster"> 
      <figure> 
      <figcaption>ames Bond<br /> Licence To Kill</figcaption> 
      <a href="James Bond For your eyes only.html"><img src="images/James Bond Licence To Kill.jpg"></a> 
      </figure> 
     </div> 

     <div class="poster"> 
      <figure> 
      <figcaption>James Bond<br /> Moonraker</figcaption> 
      <a href="James Bond Moonraker.html"><img src="images/James Bond Moonraker.jpg"></a> 
      </figure> 
     </div> 

     <div class="poster"> 
      <figure> 
      <figcaption>James Bond<br /> Never Say Never Again</figcaption> 
      <a href="James Bond Never Say Never Again.html"><img src="images/James Bond Never Say Never Again.jpg" class="background_color"></a> 
      </figure> 
     </div> 

     <div class="poster"> 
      <figure> 
      <figcaption>ames Bond<br /> Licence To Kill</figcaption> 
      <a href="James Bond For your eyes only.html"><img src="images/James Bond Licence To Kill.jpg"></a> 
      </figure> 
     </div> 

     <div class="poster"> 
      <figure> 
      <figcaption>James Bond<br /> Moonraker</figcaption> 
      <a href="James Bond Moonraker.html"><img src="images/James Bond Moonraker.jpg"></a> 
      </figure> 
     </div> 

     <div class="poster"> 
      <figure> 
      <figcaption>James Bond<br /> Never Say Never Again</figcaption> 
      <a href="James Bond Never Say Never Again.html"><img src="images/James Bond Never Say Never Again.jpg" 

     </figure> 
     </div> 
    </div> 
    </body> 
    </html> 
+0

非常感謝你的幫助我真的很感激 –

+0

我很高興我能成爲assistance.but是回答,你想要什麼? –

+0

是的,這是我正在尋找的答案,謝謝。 –