我在尝试让这些框并排显示时遇到了问题。我还希望标题和内容之间没有空格。这三个框应该穿过页面。我用“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;
}
最佳答案
在 div 上应用 float:left。并指定适当的 width。
关于html - div 没有并排出现，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15736289/