骨架框架 - 四栏网站

Question

我刚开始建立一个网站index.html，它有四栏。由于某些原因，当我测试并调整浏览器大小时，列的平板电脑尺寸会出现故障（最后一列刚刚落下）

我有什么做错了:-)

这里是我的简单的代码至今：

<header><!-- Header osuus --> 

    <div class="four columns"> <a href="http://www.nhl.com"><img src="images/logo.png" 
width="220" height="33" class="scale-with-grid" style="margin-top: 119px;"></a></div> 

    <!-- Navikaatio --> 

    <div class="eleven columns offset-by-one"> 
    <nav class="nav"> 
     <ul class="nav-list"> 
        <li class="nav-item"><a href="#">Yritys</a></li> 
        <li class="nav-item"><a href="#">Työkalut</a></li> 
        <li class="nav-item"><a href="#">Ylläpito</a></li> 
        <li class="nav-item"><a href="#">Kehitys</a></li> 
        <li class="nav-item"><a href="#">Pilvi</a></li> 
       </ul> 
    </nav> 
    </div> 

    </header><!-- Header päättyy --> 


      <div class="section"> 

       <div class="four columns"> 
       <div class="inner"> 
       dfdfgdfgdf dfg dfg dfg dfg dfg dfgdfgd dfg dfg dfg dfgdfgfdgdf 
       </div> 
       </div> 

       <div class="four columns"> 
       <div class="inner"> 
       dfdfgdfgdf dfg dfg dfg dfg dfg dfgdfgd dfg dfg dfg dfgdfgfdgdf 
       </div> 
       </div> 

       <div class="four columns"> 
       <div class="inner"> 
       dfdfgdfgdf dfg dfg dfg dfg dfg dfgdfgd dfg dfg dfg dfgdfgfdgdf 
       </div> 
       </div> 

       <div class="four columns"> 
       <div class="inner"> 
       dfdfgdfgdf dfg dfg dfg dfg dfg dfgdfgd dfg dfg dfg dfgdfgfdgdf 
       </div> 
       </div> 


      </div> 

</div><!-- container --> 


css for inner class: 

.inner { 
height: 339px; 
width: 100%; 
background-color: #707070; 
margin-top: 105px; 
text-align:left; 
} 

//米卡

Answer 1

我想你会需要将四列div包装在.container div中。我认为这就是骷髅的作品，不是吗？

Answer 2

Skeleton要求您将所有内容都包装在一个容器中，并将所有列都包装在一行中。我认为这可能是你的问题。所以：

<div class="container"> 
    <div class="row"> 
    // columns here 
    </div> 
</div>