骨架框架 - 四欄網站

我剛開始建立一個網站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; 
}

//米卡

來源

2013-09-27 Mika

您是否嘗試過使用「顯示：內聯;」和/或「float：left」給.inner？這可能會解決你的問題... – jbrya029

我想你會需要將四列div包裝在.container div中。我認爲這就是骷髏的作品，不是嗎？

來源

2013-09-27 09:36:54

Skeleton要求您將所有內容都包裝在一個容器中，並將所有列都包裝在一行中。我認爲這可能是你的問題。所以：

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

來源

2013-10-03 14:57:49

骨架框架 - 四欄網站

回答

相關問題