2013-04-01 104 views
0

我無法嘗試使框並排顯示。我也希望在標題和內容之間沒有空格。這三個框應該穿過頁面。我用「box1」,「box2」和「box3」標記了這些框。它們彼此垂直而不是水平地堆疊。div並非並排顯示

<!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

這個問題如何被允許使用'html5'標籤?與HTML5無關,只會污染郵件列表(這就是我注意到的),並會淡化搜索。它應該被刪除! – Jeach

回答

1

申請float:left上divs.And指定相應的width

0
#box1 { 
    width: 33%; 
    color: white; 
    float: left; 
} 
#box2 { 
    width: 33%; 
    float: left; 
} 
    #box3 { 
    width: 33%; 
    float: left; 
} 
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>