2013-04-01 3 views
0

У меня возникли проблемы с попыткой сделать боксы рядом. Я также хочу, чтобы между заголовком и содержимым не было пробела. Три коробки должны пересекать страницу. Я отметил поля с «box1», «box2» и «box3». Они складываются друг против друга вертикально, а не горизонтально.divs не появляются рядом друг с другом

<!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> 
Смежные вопросы