如何在瀏覽器窗口大小調整時自動摺疊網格？

我創建了一個網站來展示我的一些工作，並且當我將瀏覽器窗口調整爲更小的尺寸時，我遇到了網格崩潰的問題。如何在瀏覽器窗口大小調整時自動摺疊網格？

因爲我剛開始學習HTML和CSS一週前，我仍然非常喜歡編碼，所以我不知道如何解決它。我嘗試了各種技術，發現類似的問題，但無濟於事。噢，如果有幫助，我使用引導框架。這裏的HTML和CSS代碼：

HTML：

<body> 

<div class="container"> 

<!-- Header begin --> 

     <div class="row"> 
      <div id="divider1a" class="span12">divider1a</div> 
     </div> 

     <div class="row"> 
      <div id="divider1b" class="span12">divider1b</div> 
     </div>    

     <div class="row">   
      <div id="head" class="span12"> 
       <div class="row"> 
        <div id="logo" class="span4"><a href="index.html"><img src="images/Logo.png" width="305" height="100" /></a></div> 
        <div id="socialmedia" class="span8"><ul> 
                  <li><img src="images/rss.png" width="48" height="48" /></li> 
                  <li><a href="http://www.linkedin.com/profile/view?id=203116454&trk=tab_pro"><img src="images/linkedin.png" width="48" height="48" /></a></li> 
                  <li><img src="images/vimeo.png" width="48" height="48" /></li> 
                  <li><a href="https://www.youtube.com/user/burnwesten"><img src="images/youtube.png" width="48" height="48" /></a></li> 
                 </ul></div> 
        <div id="navbar" class="span8"><ul> 
                 <li><a href="about.html">About</a></li> 
                 <li><a href="reel.html">Demo Reel</a></li> 
                 <li><a href="portfolio.html">Portfolio</a></li> 
                 <li><a href="contact.html">Contact</a></li> 
                </ul></div> 
       </div>  
      </div> 
     </div>     

<!-- Header end --> 



<!-- Middle begin --> 

     <div class="row"> 
      <div id="divider2a" class="span12">divider2a</div> 
     </div> 

     <div class="row"> 
      <div id="divider2b" class="span12">divider2b</div> 
     </div>     

     <div class="row"> 
        <div id="imgbanner" class="span12"><img src="images/imgbanner_comingsoon.png" /></div>  
     </div>  



     <div class="row">    
      <div id="slidebanner" class="span12">   
       <div class="row"> 
        <div id="arrowleft" class="span3"><img src="images/arrowleft_comingsoon.png" /></div> 
        <div id="imgslide" class="span2"><img src="images/imgsquare_comingsoon.png" /></div> 
        <div id="imgslide" class="span2"><img src="images/imgsquare_comingsoon.png" /></div> 
        <div id="imgslide" class="span2"><img src="images/imgsquare_comingsoon.png" /></div> 
        <div id="arrowright" class="span3"><img src="images/arrowright_comingsoon.png" /></div> 
       </div>  
      </div> 
     </div> 

     <div class="row"> 
      <div id="divider3" class="span12">divider3</div> 
     </div>    

     <div class="row"> 
      <div id="welcome-news" class="span12"> 
       <div class="row"> 
        <div id="welcome" class="span8"><h2>Name</h2> 
                <h2>Job title</h2> 
                <p>Welcome to my site! 
                 Lorem ipsum dolor sit amet, option fabellas mel et, at has doctus noluisse ullamcorper, no facete probatus evertitur 
                 vim. Est id mutat lobortis. Cu ius omnesque apeirian interesset. Quo putent consequuntur at. Mel soluta sadipscing 
                 te. Ea sed impetus patrioque, sed inani vitae ea, sea ne labore prodesset. 

                 Nam in ipsum detracto disputando, sea ei habeo aliquam scripserit, vide simul graeco pri eu. Unum possit ea duo, 
                 maiorum partiendo has ut. Per tamquam omnesque cu. Sed veniam ancillae luptatum te. Sea repudiare euripidis 
                 posidonium ne, ex elit saperet qui.</p></div> 
        <div id="news" class="span4"><h3>Latest News</h3> 
               <h4>News Title</h4> 
               <p>Lorem ipsum dolor sit amet, option fabellas mel et, at has doctus noluisse ullamcorper, no facete probatus evertitur 
                vim. Est id mutat lobortis. Cu ius omnesque apeirian interesset. Quo putent consequuntur at. Mel soluta sadipscing 
                te. Ea sed impetus patrioque, sed inani vitae ea, sea ne labore prodesset. 

                Nam in ipsum detracto disputando, sea ei habeo aliquam scripserit, vide simul graeco pri eu. Unum possit ea duo, 
                maiorum partiendo has ut. Per tamquam omnesque cu. Sed veniam ancillae luptatum te. Sea repudiare euripidis 
                posidonium ne, ex elit saperet qui.</p> 
               <p>dd/mm/yy</p></div> 
       </div>  
      </div> 
     </div> 

<!-- Middle end --> 



<!-- Footer begin --> 

     <div class="row"> 
      <div id="divider4" class="span12">divider4</div> 
     </div> 

     <div class="row"> 
      <div id="copyright" class="span12"><p>Copyright note</p></div> 
     </div> 

<!-- Footer end -->   

</div> <!-- Container end --> 



<script src="http://code.jquery.com/jquery.js"></script> 
<script src="js/bootstrap.min.js"></script> 
</body>

CSS：

.container { backgound: #28383f; 
     margin: 0 auto; 
     width: 940px; }      

#divider1a { background: #051d32; 
     height: 10px; 
     width: 940px; 
     margin-left: 30px ; 
     margin-right: 0px ; } 

#divider1b { background: #051d32; 
     height: 10px; 
     width: 940px; 
     margin-left: 30px ; 
     margin-right: 0px ; } 

#logo { background: #28383f; 
    color: white; 
    height: 105px; 
    width: 310px; 
    margin-right: 0px; } 

#socialmedia { background: #28383f; 
      color: white; 
      height: 52.5px; 
      width: 630px; 
      margin-left: 0px; } 

#navbar { background: #28383f; 
     color: white; 
     height: 52.5px; 
     width: 630px; 
     margin-left: 0px; } 

#divider2a { background: #051d32; 
     height: 10px; 
     width: 940px; 
     margin-left: 30px ; 
     margin-right: 0px ; } 

#divider2b { background: #051d32; 
     height: 10px; 
     width: 940px; 
     margin-left: 30px ; 
     margin-right: 0px ; } 

#imgbanner { background: #051d32; 
     color: white; 
     height: 340px; 
     width: 940px; 
     margin-left: 30px; } 

#slidebanner { background: #051d32; 
      height: 190px; 
      width: 940px; 
      margin-left: 30px; 
      margin-right: 0px; }         

#arrowleft { background: #051d32; 
     color: white; 
     height: 190px; 
     width: 110px; 
     margin-left: 30px; 
     margin-right: 0px; } 

#arrowright { background: #051d32; 
     color: white; 
     height: 190px; 
     width: 110px; 
     margin-right: 0px; 
     margin-left: 0px; } 

#imgslide { background: #051d32; 
     color: white; 
     height: 170px; 
     width: 170px; 
     margin-left: 35px; 
     margin-right: 35px; 
     margin-top: 10px; 
     margin-bottom: 10px; } 

#divider3 { background: #051d32; 
     height: 10px; 
     width: 940px; 
     margin-left: 30px ; 
     margin-right: 0px ; } 

#welcome-news { margin-left: 120px; 
     margin-left: 30px; }    

#welcome { background: #28383f ; 
     color: white; 
     height: 500px; 
     width: 630px; } 

#news { background: #344349; 
    color: white; 
    height: 500px; 
    width: 310px; 
    margin-left: 0px; 
    margin-right: 30px; } 

#divider4 { background: #051d32; 
     height: 10px; 
     width: 940px; 
     margin-left: 30px ; 
     margin-right: 0px ; }  

#copyright { background: #051d32; 
     color: white; 
     height: 50px; 
     width: 940px; 
     margin-left: 30px; }

任何幫助將不勝感激。另外，你可能已經注意到在css代碼中有很多div有margin-left：30px;頁面不能正確居中，除非這些div由於某種原因具有30px的左邊距。所以對這個主題的任何幫助也會有所幫助。謝謝:)

編輯*

下面是它看起來像在瀏覽器的全屏：

http://i1051.photobucket.com/albums/s426/AnimationStudent/breakingproblemsfullscreen_zps57543528.png

這是發生了什麼，當我調整窗口的大小：

http://i1051.photobucket.com/albums/s426/AnimationStudent/breakingproblemsresized1_zps4a1d66a0.png

來源

2013-05-16 user2388447

你知道什麼是[響應式網頁設計]（http://en.wikipedia.org/wiki/Responsive_web_design）？TBS基於RWD。 –

請創建一個JSFiddle文件。然後它將很容易幫助你。 –

你如何使用margin：0 auto; ？ – bot

很高興看到你試圖學習新的東西。很抱歉，我建議你從nettuts+和其他地方查看教程，因爲這會提供幫助。也總是試着提問，因爲這是你將學習的唯一真正的方式。現在擺脫你的困境;

現在看來，我正在嘗試建立一個靜態設計而不是響應式設計。我假設你想擁有它尋找相同的，無論什麼屏幕，以便儘量

.container { backgound: #28383f; 
     margin: 0 auto; 
     min-width: 940px; !important}

由於這與忽略任何其他子裁決（即使是那些@media）。

如果你想要一個響應式設計，我可以建議避免使用固定寬度（像素）並朝向響應寬度（％）。

它也可能發生的原因是因爲你的代碼是流動的。我的意思是你在同一行有一個span4和兩個span8。所以當屏幕縮小時，可能會導致崩潰問題。至於中心問題......不確定，因爲看不到一個可行的例子，所以不能告訴你爲什麼可能會發生這種設計。

編輯*

根據你剛纔附加的照片，這似乎是一個有點污穢相當混亂的設計。通過這個我的意思是我沒有看到2 div的頂點或頂部或底部的div。另外，爲什麼你指的是id而不是類的樣式，因爲我個人偏好，我儘量避免使用id，因爲它們更適合於引用和樣式類。

來源

2013-05-16 09:42:42

謝謝。我有一種感覺，代碼沒有正確流動，因此導致了這些問題。我會嘗試解決你提到的問題，如果它仍然無法正常工作，我可能會選擇更簡單的設計。 – user2388447

我會盡力幫助你在一個整潔的方法！ –

如何在瀏覽器窗口大小調整時自動摺疊網格？

回答

相關問題