Question

这是我的代码，我想通过在两者之间添加一个hr来分隔2个div，任何人都可以帮我添加一个hr，它将延伸到下面的介绍和介绍图像的整行，因为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;
}

任何仅包含浮动元素的容器都将具有0高度。为避免这种情况，您必须在其CSS中添加overflow: auto;或overflow: hidden。

在此处查看结果：

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

Answer 2

JUST ADDED <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

Answer 3

在你的div之间添加hr标签然后在你的css文件中，使用hr标签的css进行播放

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

使用margin-right和margin-left属性来调整线的长度。

我无法添加hr延伸到div下面的整行

3 个答案: