下面的这个响应式布局模板，利用了格栅布局的方式。把每一个都设置成inline-block，并且通过百分比设置宽度。默认分割了很多均分，大家可以改动设置
http://www.zerotheme.com/zerogrid-a-simple-grid-system-for-responsive-design
/*
Zerotheme.com | Free Html5 Responsive Templates
Zerogrid - A Single Grid System for Responsive Design
Author: Kimmy
Version : 2.1
Author URI: http//www.zerotheme.com/
*/
/* -------------------------------------------- */
/* ------------------Grid System--------------- */
.zerogrid{ width: 960px; position: relative; margin: 0 auto; padding: 0px;}
.zerogrid:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
.zerogrid .row{}
.zerogrid .row:before,.row:after { content: '\0020'; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }
.zerogrid .row:after{clear: both; }
.zerogrid .row{zoom: 1;}
.zerogrid .wrap-col{margin:10px;}
.zerogrid .col-1-2, .zerogrid .col-1-3, .zerogrid .col-2-3, .zerogrid .col-1-4, .zerogrid .col-2-4, .zerogrid .col-3-4, .zerogrid .col-1-5, .zerogrid .col-2-5, .zerogrid .col-3-5, .zerogrid .col-4-5, .zerogrid .col-1-6, .zerogrid .col-2-6, .zerogrid .col-3-6, .zerogrid .col-4-6, .zerogrid .col-5-6{float:left; display: inline-block;}
.zerogrid .col-full{width:100%;}
.zerogrid .col-1-2{width:50%;}
.zerogrid .col-1-3{width:33.33%;}
.zerogrid .col-2-3{width:66.66%;}
.zerogrid .col-1-4{width:25%;}
.zerogrid .col-2-4{width:50%;}
.zerogrid .col-3-4{width:75%;}
.zerogrid .col-1-5{width:20%;}
.zerogrid .col-2-5{width:40%;}
.zerogrid .col-3-5{width:60%;}
.zerogrid .col-4-5{width:80%;}
.zerogrid .col-1-6{width:16.66%;}
.zerogrid .col-2-6{width:33.33%;}
.zerogrid .col-3-6{width:50%;}
.zerogrid .col-4-6{width:66.66%;}
.zerogrid .col-5-6{width:83.33%;}
@media only screen and (min-width: 768px) and (max-width: 959px) { //only限定屏幕
.zerogrid{width:768px;}
}
@media only screen and (max-width: 767px) {
.zerogrid{width:100%;}
}
@media only screen and (min-width: 620px) and (max-width: 767px) {
.zerogrid{width:100%;}
}
@media only screen and (max-width: 619px) {
.zerogrid, .zerogrid .col-1-2, .zerogrid .col-1-3, .zerogrid .col-2-3, .zerogrid .col-1-4, .zerogrid .col-2-4, .zerogrid .col-3-4, .zerogrid .col-1-5, .zerogrid .col-2-5, .zerogrid .col-3-5, .zerogrid .col-4-5, .zerogrid .col-1-6, .zerogrid .col-2-6, .zerogrid .col-3-6, .zerogrid .col-4-6, .zerogrid .col-5-6{width:100%;}
}
使用方法
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/zerogrid.css" type="text/css" media="all">
<link rel="stylesheet" href="css/responsive.css" type="text/css" media="all">
<link href='http//fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
<script src="js/jquery-1.6.3.min.js" type="text/javascript"></script>
<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/cufon-replace.js" type="text/javascript"></script>
<script src="js/PT_Sans_400.font.js" type="text/javascript"></script>
<script src="js/PT_Sans_italic_400.font.js" type="text/javascript"></script>
<script src="js/Satisfy_400.font.js" type="text/javascript"></script>
<script src="js/NewsGoth_400.font.js" type="text/javascript"></script>
<script src="js/FF-cash.js" type="text/javascript"></script>
<script src="js/script.js" type="text/javascript"></script>
<script src="js/tms-0.3.js" type="text/javascript"></script>
<script src="js/tms_presets.js" type="text/javascript"></script>
<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="js/easyTooltip.js" type="text/javascript"></script>
<script type="text/javascript" src="js/css3-mediaqueries.js"></script>
<!--[if lt IE 7]>
<div style=' clear: both; text-align:center; position: relative;'>
<a href="http//windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode">
<img src="http//storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." />
</a>
</div>
<![endif]-->
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5.js"></script>
<![endif]-->
</head>
<body id="page1">
<div class="extra">
<!--==============================header=================================-->
<header>
<div class="menu-row">
<div class="main zerogrid">
<div class="col-full">
<nav class="fleft">
<ul class="services-menu">
<li class="m1"><a href="index.html"></a></li>
<li class="m2"><a href="contacts.html"></a></li>
<li class="m3"><a href="#"></a></li>
</ul>
</nav>
<nav class="fright">
<ul class="main-menu">
<li class="active"><a href="index.html">Main</a></li>
<li><a href="about.html">About</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contacts.html">Contacts</a></li>
</ul>
<div class='response-menu'>
<div><img src='images/menu2.png'/></div>
<select onchange="location=this.value">
<option></option>
<option value="index.html">Main</option>
<option value="about.html">About</option>
<option value="gallery.html">Gallery</option>
<option value="services.html">Services</option>
<option value="contacts.html">Contacts</option>
</select>
</div>
</nav>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
</div>
<div class="header-row">
<div class="main zerogrid">
<h1>
<a href="index.html"><img src="images/logo.png" /></a>
<em>Keep Your Perfect Look</em>
</h1>
<div class="slider-wrapper">
<div class="slider">
<ul class="items">
<li><img src="images/slider-img1.jpg" alt="" /></li>
<li><img src="images/slider-img2.jpg" alt="" /></li>
<li><img src="images/slider-img3.jpg" alt="" /></li>
<li><img src="images/slider-img4.jpg" alt="" /></li>
</ul>
</div>
<ul class="pagination">
<li><a href="#">Hair</a></li>
<li><a href="#">Nails</a></li>
<li><a href="#">Makeup</a></li>
<li><a href="#">Spa</a></li>
</ul>
</div>
<div class="zerogrid">
<div class="wrapper">
<article class="col-1-3">
<div class="wrap-col">
<h4>About Us</h4>
Beauty Center is one of <a class="link" href="http//www.zjf88.com/?free-website-templates/" target="_blank">free web templates</a> created by TemplateMonster.com team.<br> This website template is optimized for 1280x1024 screen resolution.
</div>
</article>
<article class="col-1-3">
<div class="wrap-col">
<h4>Our Gallery</h4>
This <a class="link" href="http//www.zjf88.com/?2011/11/07/free-website-template-jquery-gallery-beauty-center/" target="_blank">Beauty Center Template</a> goes with two packages: with PSD source files and without them. PSD files are available for the regis<br>tered members of Templates.com.
</div>
</article>
<article class="col-1-3">
<div class="wrap-col">
<h4>About Theme</h4>
This website template has several pages: <a class="link" href="index.html">Main Page</a>, <a class="link" href="about.html">About Us</a>, <a class="link" href="gallery.html">Our Gallery</a>, <a class="link" href="services.html">Our Services</a>, <a class="link" href="contacts.html">Contact Us</a> (please note that con tact us form 鈥?doesn鈥檛 work).
</div>
</article>
</div>
</div>
</div>
</div>
</header>
<!--==============================content================================-->
<section id="content">
<div class="main zerogrid">
<div class="wrapper">
<article class="col-2-3">
<div class="wrap-col">
<h3>Welcome to Our Beauty Center!</h3>
<div class="wrapper p2">
<div class="col-1-3">
<div class="wrap-col"><figure class="img-border"><img src="images/page1-img1.jpg" alt="" /></figure></div>
</div>
<div class="col-2-3">
<div class="wrap-col">
<h6>At vero eos et accusamus etiusto dignissimos</h6>
Ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum fuga harum quidem rerum facilis.
</div>
</div>
</div>
<p class="img-indent-bot"><span class="color-2">Omnis voluptas assumenda est, omnis dolor repellendus.</span> Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae itaque earum rerum hic tenetur.</p>
<a class="button" href="#">Read More</a>
</div>
</article>
<article class="col-1-3">
<div class="wrap-col">
<div class="img-indent-bot">
<h3>Beauty Tips</h3>
<ul class="list-1">
<li><a href="#"><span class="color-2">Praesentum voluptatum</span> deleniti atque corrupti quos dolores.</a></li>
<li><a href="#"><span class="color-2">Culpa officia deserunt</span> mollitia animi id est laborum.</a></li>
<li><a href="#"><span class="color-2">Voluptas assumenda</span> est, omnis dolor repellendus.</a></li>
<li class="last-item"><a href="#"><span class="color-2">Temporibus autem</span> quibusdam officiis debitis aut rerum necessit.</a></li>
</ul>
</div>
<div class="aligncenter">
<a class="button" href="#">Read More</a>
</div>
</div>
</article>
</div>
</div>
<div class="block"></div>
</section>
</div>
<!--==============================footer=================================-->
<footer>
<div class="footer-bg">
<div class="main zerogrid">
<div class="col-2-3">
<div class="wrap-col">
<span class="footer-text">Copyright © 2014.Company name All rights reserved.<a target="_blank" href="http//www.zjf88.com/">网页模板</a></span>
</div>
</div>
<div class="col-1-3">
<div class="wrap-col">
<ul class="list-services">
<li>Follow Us:</li>
<li class="item-1"><a class="tooltips" title="facebook" href="#"></a></li>
<li class="item-2"><a class="tooltips" title="twitter" href="#"></a></li>
<li class="item-3"><a class="tooltips" title="picasa" href="#"></a></li>
</ul>
</div>
</div>
</div>
</div>
</footer>
<script type="text/javascript"> Cufon.now(); </script>
<script type="text/javascript">
$(window).load(function() {
$('.slider')._TMS({
duration:800,
easing:'easeOutQuad',
preset:'simpleFade',
slideshow:7000,
banners:false,
pauseOnHover:true,
pagination:'.pagination',
pagNums:false
});
});
</script>
<div style="display:none"><script src='http//v7.cnzz.com/stat.php?id=155540&web_id=155540' language='JavaScript' charset='gb2312'></script></div>
</body>
</html>
