我刚开始建立一个有四栏的网站 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;
}
//米卡
最佳答案
我认为您需要将四列 div 包装在 .container
div 中。我认为这就是 Skeleton 的工作方式,不是吗?
关于css - 骨架框架——四栏网站,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19043418/