您好，我正在尝试用 HTML 创建一个最大宽度为 1020 像素的网格系统。
我有以下 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>
提前致谢!
最佳答案
实际上这不是纯 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;
}
关于html - 1020px 网格系统问题 HTML，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22843036/