Перемещение горизонтальной линии вниз по CSS

У меня есть горизонтальная линия, начинающая третий путь через веб-страницу, но получение линии для перемещения вниз немного (возможно, 200-400 пикселей) дает мне настоящую боль. И всякий раз, когда я пытаюсь использовать «top: -200px;» внутри элемента стиля (по средней линии) это только делает половину линии исчезаютПеремещение горизонтальной линии вниз по CSS

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

источник

2016-03-19 skillmaxer

Оставьте информацию о настройке bottom и установите top: 200px; (не минус, а плюс - это расстояние до вершины). BTW: верхний и нижний в одном правиле слишком много, одного из них достаточно.

источник

2016-03-19 01:40:23 Johannes

Если я делаю это с тегами «.divider», это приводит к тому, что вертикальные разделительные линии исчезают, линия im, пытающаяся перейти вниз, определена в теге стиля средней линии – skillmaxer

, вы должны определить для них высоту – Johannes

Nvm i узнал, что делать, под стилем «срединная линия» мне пришлось изменить положение на абсолютное, а затем добавить еще одну строку, которая указана внизу, и определить пиксели – skillmaxer

Перемещение горизонтальной линии вниз по CSS

ответ

Смежные вопросы