1

我正在创建一个网站来展示我的一些工作，当我将浏览器窗口调整为更小的尺寸时，我遇到了网格崩溃的问题。

自从我一周前刚开始学习 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/breakproblemsfullscreen_zps57543528.png

这就是我调整窗口大小时发生的情况：

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

4

1 回答 1

0

很高兴看到你尝试学习新事物。我建议您从nettuts+和其他一些地方查看教程，因为这会有所帮助。还要始终尝试提出问题，因为这是您学习的唯一真实方式。现在进入你的困境；

现在在我看来，您正在尝试建立静态设计而不是响应式设计。我假设您希望无论在什么屏幕上看起来都一样，所以请尝试

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

因为这忽略了任何其他子裁决（甚至是@media 的）。

但是，如果您想要响应式设计，我建议您避免使用固定宽度（像素）并转向响应式宽度（％）。

它也可能发生的原因是因为您的代码不流动。我的意思是你在同一行中有一个 span4 和两个 span8。因此，当屏幕缩小时，可能会导致折叠问题。至于居中问题...不确定，因为看不到工作示例，因此无法告诉您为什么此设计可能会发生这种情况。

编辑*

根据您刚刚附上的图片，它似乎有点不干净且相当杂乱的设计。我的意思是我没有看到 2 个 div 的点以及标题 div 的顶部或底部。另外，为什么您要引用 ids 而不是样式类，因为根据个人喜好，我尽量避免使用 ids，因为它们更适合引用和样式类。

于 2013-05-16T09:42:42.457 回答