Question

我已经让水平线从网页开始第三条路线了，但让线路向下移动一点（可能是200-400px？）给了我一个真正的痛苦。每当我尝试使用＆＃34; top：-200px;＆＃34;在样式元素（中线）中，它只会使一半的线消失

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

Answer 1

取消bottom设置并设置top: 200px;（不是减号，但加号 - 表示距离顶部的距离）。 BTW：一条规则中的顶部和底部太多，其中一条就足够了。

通过CSS向下移动水平线

1 个答案: