我的水平线从网页的第三条开始,但是让线向下移动一点(也许是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/