css - 骨架框架——四栏网站

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 中。我认为这就是 Skeleton 的工作方式，不是吗？