1020px网格系统问题HTML

时间:2014-04-03 16:01:55

标签: html css web grid sass

您好我正在尝试用HTML创建一个最大宽度为1020px的网格系统。

我有以下CSS:

* {
  @include box-sizing(border-box);
}

$pad: 20px;

.container_20 {
  background: white;
  margin: 0 0 $pad 0;
  width: 1020px;

  &:after {
    /* Or @extend clearfix */
    content: "";
    display: table;
    clear: both;
  }
}

[class*='col-'] {
  float: left;
  padding-right: $pad;
  .grid &:last-of-type {
    padding-right: 0;
  }
}
.col-2-3 {
  width: 66.66%;
}
.col-1-3 {
  width: 33.33%;
}
.col-1-2 {
  width: 50%;
}
.col-1-4 {
  width: 25%;
}
.col-1-8 {
  width: 12.5%;
}

.module {
  padding: $pad;
  background: #eee;
}

/* Opt-in outside padding */
.grid-pad {
  padding: $pad 0 $pad $pad;
  [class*='col-']:last-of-type {
    padding-right: $pad;
  }
}

}

但每当我尝试在HTML中实现它时,我都无法获得所需的效果。是否有人能够帮助我了解正确的代码应该是什么,以获得一个网格,并能够正确,并排,一半和三分之一对齐项目?

编辑:HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>TreeScapes Northern Ireland</title>
        <meta name="TreeScapes NI" content="TreeScapes, Tree, NI">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- Place favicon.ico and apple-touch-icon(s) in the root directory -->


        <link rel="stylesheet" href="css/reset.css">
        <link rel="stylesheet" href="css/style3.css">
        <link rel="stylesheet" href="css/text.css">
        <link rel="stylesheet" href="css/style2.css">
    </head>
    <body>
        <!--[if lt IE 8]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->

        <!-- Add your site or application content here -->

        <!-- Chris Rolston Web Design - Engage IT -->

        <header class="container_20">
            <h1> TreeScapes </h1>
            <nav id="cssmenu" class="container_20">
                <ul>
                    <li class='active'>
                        <a href="#"><span>HOME</span></a>
                    </li>
                    <li>
                        <a href="#"><span>ABOUT US</span></a>
                    </li>
                    <li>
                        <a href="#"><span>SERVICES</span></a>
                    </li>
                    <li>
                        <a href="#"><span>NEWS</span></a>
                    </li>
                    <li>
                        <a href="#"><span>ASK THE EXPERT</span></a>
                    </li>
                    <li>
                        <a href="#"><span>ARRANGE A CALLBACK</span></a>
                    </li>
                    <li>
                        <a href="#"><span>CONTACT US</span></a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/tree_twitter.gif" alt="Contact us on Twitter">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/tree_facebook.gif" alt="Contact us on Facebook">
                        </a>
                    </li>
                </ul>
            </nav>
        </header>



        <div id="main" class="container_20">

<p>

        Space for Slideshow Insert upon WordPress Convert

        <p>

        <img src="img/tree_divide.png">


            <div id="service_1" class="col-1-3">
                <h3> SERVICE 1 </h3>
            </div>
                <div id="service_2" class="col-1-3">
                <h3> SERVICE 2 </h3>
            </div>
                <div id="service_3" class="col-1-3">
                <h3> SERVICE 3 </h3>
            </div>

        <div id="primary" class="col-1-2">
        <h1> Tree Surgeons Belfast </h1>
        <article class="col-1-2">
            <h2>
                Welcome to TreeScapes, <br>Expert Tree Surgeons <br>Belfast and Northern Ireland
            <img src="img/tree_log.gif">


            <h6> 
                When looking for tree surgeons in Belfast and Northern Ireland TreeScapes NI is one of the leading arboricultural companies in the province. Our focus is on delivering a professional and high quality <a href="#"> tree surgery </a> service with excellent and responsive customer care. 
                <br>
                ..........................
                <p>
                Our tree surgeons provide a tree management and contracting service to both the private and commerical market. Clients include organisations such as local authorities, utility companies, civil engineering companies, housing associations, colleges, schools and churches. Increasingly we work on the basis of developing long-term partnerships with our clients. 

            </h2>




            <aside class="col-1-4">
                <div id="twitter_feed">
                <img src="img/tree_twitter_bg.gif">
            </div>

            <div id="expert" class="col-1-8">
                <img src="img/tree_logcut">
                Ask the expert
            </div>
            <aside>
                <div id="Insured" class="col-1-8">
                    <img src="img/tree_leaf.gif">
                    <h3> Fully insured </h3>
                    <h6> * £10 MILLION PUBLIC LIABILITY * <h6>



            </aside> 

        </aside>

    <div id="contact" class="col-1-2">
        <article>
            <h6> 
                IF you are in need of our professional tree surgeons in 
                Belfast or the surrounding Northern Ireland area please:
                <p>
                    CONTACT US TODAY CLICK HERE
            </h6>

            <img src="img/tree_divide.png">
        <p>
    </div>

</div>

    <div id="footer" class="container_20">
        <div id="contact_foot" class="col-1-2">
            <div id="bottom" class="flot-bottom">
        <h6>
            Tel: 028 90705161 - Mob: 0773818 174 - Freephone: 08000 699 738 <br> Email: info@treescapeni.co.uk - Copyright: Treescapes NI - Skype: Treescapes
            <p>

            <div id="footernav" class="col-1-2">
                <nav>
                <ul>
                    <li>
                        <a href="#">SITE MAP</a>
                    </li>
                    <li>
                        <a href="#">TERMS AND CONDITIONS</a>
                    </li>
                    <li>
                        <a href="#">ABOUT US</a>
                    </li>
                    <li>
                        <a href="#">CONTACT US</a>
                    </li>
                </ul>
                </nav>
        </h6>

        <div id="city" class="col-1-8">
            <img href="img/tree_review_footer.gif">
            <img href="img/tree_cityg_footer.gif">

    </div>
</div>














        <!-- Chris Rolston Web Design - Engage IT -->


    </body>
</html>

提前致谢!

1 个答案:

答案 0 :(得分:1)

实际上这不是纯粹的CSS。您正在使用SASS(必须先编译)。

尝试编译的CSS版本:

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.grid {
  background: white;
  width: 100%;
  max-width: 1020px;
  margin: 0 0 20px 0;
}
.grid:after {
  content: "";
  display: table;
  clear: both;
}

[class*='col-'] {
  float: left;
  padding-right: 20px;
}

.grid [class*='col-']:last-of-type {
  padding-right: 0;
}

.col-2-3 {
  width: 66.66%;
}

.col-1-3 {
  width: 33.33%;
}

.col-1-2 {
  width: 50%;
}

.col-1-4 {
  width: 25%;
}

.col-1-8 {
  width: 12.5%;
}

.module {
  padding: 20px;
  background: #eee;
}

/* Opt-in outside padding */
.grid-pad {
  padding: 20px 0 20px 20px;
}
.grid-pad [class*='col-']:last-of-type {
  padding-right: 20px;
}