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;
}

// Mika

Answer 1

我认为你需要在.container div中包装四列div。我认为Skeleton的工作方式不是吗？

Answer 2

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

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

骨架框架 - 四列网站

2 个答案: