我無法添加延伸到整個行下面的小時

Question

這裏是我的代碼，我想通過在兩個div之間添加hr來分隔2個div，任何人都可以幫助我添加一個小時，它將擴展到整個線以下的介紹和圖片介紹，作爲HR只延長到介紹的形象，所以任何人都可以幫助我的HR-

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

Answer 1

重要的是要補充一點：

#intro-div { 
    overflow: auto; 
} 

任何容器，它僅包含浮動的Elemen ts將有0高度。爲避免這種情況，您必須將overflow: auto;或overflow: hidden添加到其CSS。

在這裏看到的結果：

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

Answer 2

添加標籤小時之間你div的，然後在你的CSS文件，玩的小時標記

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

玩同裕右和利潤率左屬性調整線的長度的CSS。

Answer 3

剛剛添加<hr/>和它的作品

<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