我的水平线从网页的第三条开始,但是让线向下移动一点(也许是200-400px?)让我感到非常痛苦。每当我尝试使用“ top:-200px;”在样式元素(中线)内,它只会使一半的线消失

<html>
<header>

<style>


.divider{
    position:absolute;
    left:33.3%;
    top:0%;
    bottom:0%;
    border-left:5px solid black;
}

.divider2{
    position:absolute;
    left:66.6%;
    top:0%;
    bottom:0%;
    border-left:5px solid black;
}

#left {
    width:380px;
    float:left;
    margin-left: 100px
  }

#middle {
    width:380px;
    float:right;
    text-align:center;
    margin-right: 300px
    }

#right {
    width:380px;
    float:right;
    margin-left: 40px
}

#midline{
    position:relative;
    left:530px;
    width:1265px;
    height:5px;
    background: black;
}

</style>
</header>

<body style="background-image: url(https://www.planwallpaper.com/static/images/Cool-Wallpapers-Background-HD-Wallpaper.jpg);" >

<div id="left">
<font color="white">
<p>

    <h1> Greetings!</h1>

    </p>

<font size="6", color="white">

<h3>Welcome to my world ;D </h3>

    <p>

    Heres a little information about me

    </p>

    <p>

     A photo of me  VV

    </p>

<div id="midline"></div>

    <p>

    <a href="https://www.facebook.com/shan.kulkarni.9">

    <img src=file:///C:/Users/shank/Desktop/Website/02f8a12b-3edf-4a4f-981c-860f7c7c3b07.jpg Width="350" height="500" />

    </a>

    <p>

      Click on it and you'll go to my Facebook


    </p>

    <p>

        <a href="https://www.instagram.com/whatsittoyah_/"> Follow me on instagram while you're at it ;o </a>

    </p>



    </div>

    <div class="divider2"></div>


    <div id="right">

    <h2> My Hobbies </h2>

    </div>


    <div class="divider"></div>


    <div id="middle">

    <h2> Favorite Quotes</h2>


    </div>


</font>





</body>

</html>


这是代码:
https://jsfiddle.net/fjzcwfyx/

最佳答案

省略bottom设置并设置top: 200px;(不是减号,而是加号-到顶部的距离)。顺便说一句:一条规则中的顶部和底部太多,其中之一就足够了。

关于html - 通过CSS向下移动水平线,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/36096804/

10-13 01:47