【发布时间】：2014-04-04 00:31:16
【问题描述】：
您好，我正在尝试在 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>
提前致谢！
【问题讨论】：
-
你在哪里应用
max-width，你是如何浮动元素的？ -
您显示的代码没有任何问题。请发布重现您遇到的问题的 HTML。