（或）
http://codepen.io/anon/pen/ZGNOQW
code in jsfiddle & codepen
/* - - - - - - - - - - - - - - - - - - - - - - -
GLOBAL FIXES
- - - - - - - - - - - - - - - - - - - - - - - - */
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.group:before,
.group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
zoom: 1;
/* For IE 6/7 (trigger hasLayout) */
}
/* - - - - - - - - - - - - - - - - - - - - - - -
MOBILE-FIRST STYLING BEGINS HERE
- - - - - - - - - - - - - - - - - - - - - - - - */
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 100%;
line-height: 1.5;
background-color: #C5C9C8;
}
h1,
h2 {
font-family: Impact !important;
line-height: 0.9 !important;
text-transform: uppercase !important;
}
h1 {
font-size: 6em !important;
margin: 0;
}
h2 {
font-size: 2em;
}
a {
color: #f03;
text-decoration: none;
}
a:hover {
color: #444;
text-decoration: underline;
}
a.btn {
display: inline-block;
text-transform: uppercase;
background: #f03;
color: white;
margin: 1em;
padding: 1em 2em;
margin: auto;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
}
a.btn:hover {
background: #444;
text-decoration: none;
}
header {
background: #e9e9e9;
padding: 3em 0em 0em 0em;
text-align: center;
border-top: 0.25em solid #f03;
}
header p {
margin-bottom: 2em;
}
blockquote {
margin: 0;
padding: 3em;
background: black;
font-family: georgia;
font-size: 1.5em;
text-align: center;
color: white;
}
#main {
margin: 2em;
}
section img {
background: #B8B8B8;
margin-top: 1.5em;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
width: 100%;
}
section {
display: inline;
}
footer#credits {
text-align: center;
background: #f03;
color: white;
padding: 2em;
}
/* - - - - - - - - - - - - - - - - - - - - - - -
MEDIA QUERIES FOR LARGER BREAKPOINTS BEGIN HERE
- - - - - - - - - - - - - - - - - - - - - - - - */
/*
@media screen and (min-width: 800px) {
section{
width: 31.481481481481481481481481481481%;
float: left;
margin-left: 2.777777777777777777777777777778%;
}
section:first-child{
margin-left: 0px;
}
}
*/<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<title>Time Travel</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Raw page content, ready for semantic structuring -->
<header>
<h1>Time Travel</h1>
<p>Because sometimes you just need to travel through some time.</p>
<blockquote>
<p>"Time travel into the indefinite future is consistent with the laws of nature."</p>
</blockquote>
<div id="main" role="main" class="group row">
<section class="col-md-4">
<img src="imgs/wormhole.png" alt="Worm Holes">
<h2>Using Wormholes</h2>
<p>
There is no observational evidence for wormholes, but on a theoretical level there are valid solutions to the equations of the theory of general relativity which contain wormholes. Because of its robust theoretical strength, a wormhole is also known as
one of the great physics metaphors for teaching general relativity.</p>
<a href="#">Learn More</a>
</p>
</section>
<section class="col-md-4">
<img src="imgs/time-dilation.png" alt="Time Dilation">
<h2>Time Dilation</h2>
<p>Time dilation is permitted by Albert Einstein's special and general theories of relativity. These theories state that, relative to a given observer, time passes more slowly for bodies moving quickly relative to that observer, or bodies that are
deeper within a gravity well.
<a href="#">Learn More</a>
</p>
</section>
<section class="col-md-4">
<img src="imgs/many-worlds.png" alt="Many Worlds">
<h2>Parallel Universes</h2>
<p>The many-worlds interpretation is an interpretation of quantum mechanics that asserts the objective reality of the universal wavefunction, but denies the actuality of wavefunction collapse. Many-worlds implies that all possible alternative histories
and futures are real, each representing an actual "world" (or "universe").
<a href="#">Learn More</a>
</p>
</section>
<section class="col-md-4">
<img src="imgs/wormhole.png" alt="Worm Holes">
<h2>Using Wormholes</h2>
<p>
There is no observational evidence for wormholes, but on a theoretical level there are valid solutions to the equations of the theory of general relativity which contain wormholes. Because of its robust theoretical strength, a wormhole is also known as
one of the great physics metaphors for teaching general relativity.</p>
<a href="#">Learn More</a>
</p>
</section>
<section class="col-md-4">
<img src="imgs/time-dilation.png" alt="Time Dilation">
<h2>Time Dilation</h2>
<p>Time dilation is permitted by Albert Einstein's special and general theories of relativity. These theories state that, relative to a given observer, time passes more slowly for bodies moving quickly relative to that observer, or bodies that are
deeper within a gravity well.
<a href="#">Learn More</a>
</p>
</section>
<section class="col-md-4">
<img src="imgs/many-worlds.png" alt="Many Worlds">
<h2>Parallel Universes</h2>
<p>The many-worlds interpretation is an interpretation of quantum mechanics that asserts the objective reality of the universal wavefunction, but denies the actuality of wavefunction collapse. Many-worlds implies that all possible alternative histories
and futures are real, each representing an actual "world" (or "universe").
<a href="#">Learn More</a>
</p>
</section>
</div>
<footer id="credits">© Albert Einstein</footer>
</body>
</html>
请看这个例子。在jsfiddle中展开浏览器窗口和结果框以查看倒置楼梯。
请让我知道我的造型有什么问题。
据我所知，一行只能有12个单位的列大小，但我以前使用过这种方法并且有效。我们动态构建列时很有用，但我们不知道确切的数字。我不知道为什么它现在不起作用。
即使没有引导程序，当我使用float：left和width：33％的媒体查询时，我也有同样的效果，所以我不认为它是一个引导问题，我的代码出了问题。第二只眼可能会有所帮助。