我在试图让这些方框并排出现时遇到了麻烦。我也想在标题和内容之间没有空格。这三个框应该穿过页面。我用“box1”，“box2”和“box3”标记了这些框。它们垂直堆叠而不是水平堆叠。
<!DOCTYPE html>
<html>
<head>
<title>Learning iOS Development - Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<section id="paper">
<header>
<img src="images/logo.png" width="400px">
</header>
<p>
Welcome to LearningiOSDevelopment.com. It is here where you can take your first steps to better understanding the iOS Software Development Kit and Objective-C, the tools you need to build a native app for iPhone, iPod, and iPad.Through 10 condense lessons, you'll be able to create your iPhone application in no time. With these lessons and some practice, you'll be ready to test your skills with a quiz at the end.
<br>
<br>
This course will teach you how to download and use Xcode and program basic interfaces, as well as give you a better understanding as to how Apple's written documentation, a database of files that allows users to reference snippets of code and more features from Xcode. Best of all? It is completely free!
</p>
<br>
<button id="start" name="test">
Get Started Now
</button>
<br>
<br>
<div id="box1">
<header id="whyshouldi">
What is iOS Development
</header>
<p id="whatis">
iOS Development is the process used to create native applications for iPhone, iPod, and iPad. Applications are made using the SDK(software development kit), Xcode. Aside from the software, it is necessary that iOS Developers know Objective-C.
</p>
</div>
<div id="box2">
<header id="whyshouldi">
Why Should I learn it?
</header>
<p id="whatis">
Learning native app development can allow you to better expand the horizon of knowledge in iPhone, and can make you a better programmer overall. It is a great skill to know no matter who you are.
</p>
</div>
<div id="box3">
<header id="whyshouldi">
How Great Will I Become?
</header>
<p id="whatis">
From using this website you will not become pro efficient in Xcode and Objective-C, but rather you will understand the basic processes in which an app is created and how to use the resources presented to you to further understand iOS Development and it's applications.
</p>
</div>
</section>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
</body>
</html>
body {
background-color: #e3e3e3;
font: normal 80%/1.4 'Fenix', Helvetica, Arial, sans-serif;
}
#paper {
background-image: url('../images/linedpaperx2.png');
background-color: white;
margin: 75px;
padding: 75px;
}
p {
font-size: 1.3em;
font-style: thin;
width: 900px;
}
button {
height: 36px;
width: 288px;
background-color: #a43200;
color: white;
font-size: 1.3em;
}
#box1 {
width: 288px;
color: white;
float: 33%;
}
#box2 {
width: 288px;
color: 33%;
}
h1 {
background-color: #3477ff;
text-align: center;
font-size: 1.3em;
}
#whatis {
width: 288px;
background-color: #d9e9fd;
color: black;
padding: 30px;
}
#developer {
color: white;
}
#bluetitle {
color: white;
background-color: #3477ff;
}
#whyshouldi {
background-color: #3477ff;
width:288px;
padding: 10px 30px 10px 30px;
color: white;
font-size: 1.6em;
}
答案 0 :(得分：1)
在div上应用float:left并指定相应的width。
答案 1 :(得分：0)
#box1 {
width: 33%;
color: white;
float: left;
}
#box2 {
width: 33%;
float: left;
}
#box3 {
width: 33%;
float: left;
}
答案 2 :(得分：0)
摆脱了标题和居中框之间的空间。标记不同，这些只是建议。
<html>
<head>
<title>Learning iOS Development</title>
<style type="text/css">
body {
background-color: #e3e3e3;
font: normal 80%/1.4 'Fenix', Helvetica, Arial, sans-serif;
margin-left: 10%;
margin-right: 10%;
}
section {
background-color: white;
padding: 75px;
}
#start {
height: 36px;
width: 288px;
margin-top: 30px;
margin-bottom: 30px;
background-color: #a43200;
color: white;
font-size: 1.3em;
}
h3 {
background-color: #3477ff;
padding: 10px 30px 10px 30px;
color: #fff;
font-size: 1.6em;
margin-bottom: 0;
}
.group {
float: left;
width: 32%;
margin-right: 5px;
margin-top: 0;
}
.group > p {
margin-top: 0;
background-color: #d9e9fd;
color: black;
padding: 30px;
}
</style>
</head>
<body>
<section>
<p id="intro1">
Welcome to LearningiOSDevelopment.com. It is here where you can take your first steps to better understanding the iOS Software Development Kit and Objective-C, the tools you need to build a native app for iPhone, iPod, and iPad.Through 10 condense lessons, you'll be able to create your iPhone application in no time. With these lessons and some practice, you'll be ready to test your skills with a quiz at the end.
</p>
<p id="intro2">
This course will teach you how to download and use Xcode and program basic interfaces, as well as give you a better understanding as to how Apple's written documentation, a database of files that allows users to reference snippets of code and more features from Xcode. Best of all? It is completely free!
</p>
<input type="button" id="start" value="Get Started Now">
<div id="container">
<div class="group">
<h3>What is iOS Development</h3>
<p>
iOS Development is the process used to create native applications for iPhone, iPod, and iPad. Applications are made using the SDK(software development kit), Xcode. Aside from the software, it is necessary that iOS Developers know Objective-C.
</p>
</div>
<div class="group">
<h3>Why Should I learn it?</h3>
<p>
Learning native app development can allow you to better expand the horizon of knowledge in iPhone, and can make you a better programmer overall. It is a great skill to know no matter who you are.
</p>
</div>
<div class="group">
<h3>How Great Will I Become?</h3>
<p>
From using this website you will not become pro efficient in Xcode and Objective-C, but rather you will understand the basic processes in which an app is created and how to use the resources presented to you to further understand iOS Development and it's applications.
</p>
</div>
</div>
<section>
</body>
</html>