Как отделить эти две <div>от одной строки? - PullRequest
Новая
       16

Как отделить эти две <div>от одной строки?

0 голосов
/ 14 марта 2020

Я видел много постов, которые помещали два элемента в одну строку. Моя проблема с точностью до наоборот! Как вы можете видеть в коде, есть пять полей и параграф рядом с ним, которые должны быть ниже блоков. Может кто-нибудь подскажите пожалуйста как это исправить? Я изучаю HTML / CSS прямо сейчас, и я хотел бы проработать это здесь без сетки / гибкости, прежде чем я продолжу и изучу их.

HTML: 

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width-device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="style.css">

    </head>

    <body>
        <nav>
            <div id="navigation">
                <div class="wrapper">
                    <div id="logo"></div>
                    <div id="menu">
                        <a href="#">Home</a>
                        <a href="#">About Us</a>
                        <a href="#">Contact</a>
                        <a href="#">Imprint</a>
                    </div>            
                </div>
            </div>
        </nav>

        <div id="main">
            <div class="wrapper">
               <div id="top-boxes">
                   <div class="box"></div>
                   <div class="box"></div>
                   <div class="box"></div>
                   <div class="box"></div>
                   <div class="box"></div>
               </div>

            <p>
              Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

            </p>
         </div>
        </div>
    </body>
</html>

CSS: 

 *
{
    margin: 0;
    padding: 0;
    text-decoration: none;
}

.wrapper
{
    margin: 0 auto;
    width: 70%;
}

/* Navigation */

#navigation
{
    width: 100%;
    height: 5em;
    background-color: darkgrey;
    position: fixed;
    top: 0;
}

#logo
{
    margin: 1em;
    width: 2.5em;
    height: 2.5em;
    background-size: 2.5em 2.5em;
    background-image: url("rocket.png");
    float: left;
}


#menu
{   
    margin-top: 2em;
    margin-right: 1em;
    float: right; 
}

#menu a
{
    color: #fff;
    font-family: sans-serif;
    font-style: normal;
    font-weight: 100;
}

/* Inhalt */



#main p
{
    margin: auto;
    margin-top: 7em; 
}

.box
{
    width: 5em;
    height: 5em;
    padding: 1em;
    margin: 1em;
    background-color: gray;
    float: left;

    display: block;
}

Вот кодовая ссылка:

https://codepen.io/andy4117/pen/KKpXEwJ

Заранее спасибо!

1 Ответ

2 голосов
/ 14 марта 2020 
.box
{
    width: 5em;
    height: 5em;
    padding: 1em;
    margin: 1em;
    background-color: gray;
    /* float: left; */

    display: inline-block;/* instead of block */
}

РЕДАКТИРОВАТЬ

Если вы хотите использовать float по некоторым причинам, не рекомендуется, хотя вы можете добавить float в свой add float: слева от элемента # top-boxes. 

#top-boxes{float:left}
...