为什么960网格不会划分为" fours"?

时间:2015-06-25 21:14:55

标签: css3

我只是想用CSS框架开始我的冒险,但我遇到了一个问题,我无法克服。我已经添加了960.css和我自己的stylesheet.css,但它一直不会将内容划分为" fours"。

HTML

<html>
<head>
<title>Grid test</title>
<link rel="stylesheet" type="text/css" href="css/960.css" /> 
<link rel="stylesheet" type="text/css" href="stylesheet.css" /> 
</head>
<body>
  <div class="container_12 clearfix">
    <div id="header" class="grid_12">
    <h1>Logo</h1> 
    <div id="nav">
        <ul>
            <li><a href="">Home</a></li> 
            <li><a href="">Products</a></li> 
            <li><a href="">Services</a></li> 
            <li><a href="">About</a></li> 
            <li><a href="">Contact</a></li>
        </ul> 
    </div>

    </div>
    <div id="feature" class="grid_12">
        <p>Feature</p> 
    </div>
    <div class="article grid_4"> 
        <p>Column One</p>
    </div>

    <div class="article grid_4">
        <p>Column Two</p> 
    </div>

    <div class="article grid_4"> 
        <p>Column Three</p>
    </div>

    <div id="footer" class="grid_12">
<p>© Copyright 2011</p> </div>
  </div><!-- .container_12 -->
</body>
</html>

CSS

*{
font-family: Arial, Verdana, sans-serif; color: #665544;
text-align: center;}
#nav, #feature, .article, #footer {
  background-color: #efefef;
  margin-top: 20px;
  padding: 10px 0px 5px 0px;}
#feature, .article {
  height: 100px;}
li {
  display: inline;
  padding: 5px;}

0 个答案:

没有答案