Ich bin nicht in der Lage, Stunden, die sich auf die gesamte Linie unter einem div

Question

erstreckt, hier ist mein Code, ich möchte 2 divs durch Hinzufügen einer hr dazwischen trennen, kann jemand mir helfen, eine hr hinzufügen, die auf das Ganze zu erweitern Zeile unterhalb Intro und Einleitung Bild, wie das hr nur bis intro Bild erweitert wird, so kann mir jemand helfen

#intro{ 
     font-family: 'Sansita', sans-serif; 
     font-size: 170%;  
     float: right;     
     width: 50%;     
     margin-right: 20px; 
     margin-left: 10px; 
      color: #ff471a ; 
     } 



     #introImage { 

      float: left; 
      width: 40%; 
      margin-left: 70px; 
      margin-top: 35px; 
      box-shadow: 10px 10px grey; 
      border-radius: 10px; 

     } 




    #hitchhiking-info { 

     margin-top: 20px; 
     width: 100%; 
     height: 100px; 
     text-align: center; 
     background-color: blue; 
     float: none; 

    } 

<div id="intro-div"> 

     <p id="intro"> Hello There! I have made this website to share my experiences of hitchhiking, which is my full time job. I want to inspire other hitchhikers as well and inspire people. This website will hopefully clear all your misconceptions about hitchhiking as a proffession, as it is underrated and critisized by people. However I have a very different perspective about hitchhiking, you will get to know about it through my website. This website is a mean I will be using to reach to people around the world. Fell free to comment any suggestions or feedback of my experiences and contact me for any query </p>  

     <img id="introImage" src="intro-image.jpg"> 




    </div> 

    <div id="hitchhiking-info"> 

     <h1 id="heading"> Hitchhiking </h1> 
    </div> 

mit dem hr- aus

Answer 1

Das Wichtigste ist, diese hinzuzufügen:

#intro-div { 
    overflow: auto; 
} 

Jeder Behälter, der nur schwebte Verput enthält ts wird 0 Höhe haben. Um dies zu vermeiden, müssen Sie overflow: auto; oder overflow: hidden zu seinem CSS hinzufügen.

Das Ergebnis sehen Sie hier:

http://codepen.io/anon/pen/MJzdda

Answer 2

Fügen Sie den hr-Tag zwischen Ihre divs und dann in Ihrer CSS-Datei, mit der CSS des

hr { 
display: block; 
margin-top: 0.5em; 
margin-bottom: 0.5em; 
margin-left: auto; 
margin-right: auto; 
border-style: inset; 
border-width: 1px; 
} 

Spieleigenschaften hr-Tages spielt mit dem margin-right und margin-left die Länge der Linie einzustellen.

Answer 3

GERADE <hr/> hinzugefügt, und es funktioniert

<div id="intro-div"> 

     <p id="intro"> However I have a very different perspective about hitchhiking, you will get to know about it through my website. This website is a mean I will be using to reach to people around the world. Fell free to comment any suggestions or feedback of my experiences and contact me for any query </p>  

     <img id="introImage" src="intro-image.jpg"> 


<hr/> 

    </div> 

    <div id="hitchhiking-info"> 

     <h1 id="heading"> Hitchhiking </h1> 
    </div> 


    [1]: https://i.stack.imgur.com/wbY63.png