Как разместить статический div (A) рядом с другим (B) после того, как B изменил свое местоположение? - PullRequest
Новая
       64

Как разместить статический div (A) рядом с другим (B) после того, как B изменил свое местоположение?

0 голосов
/ 10 ноября 2019

Когда мой сайт загружается, у меня появляется анимация, в которой текст перемещается из центра влево. Я попытался добавить кнопку, которая должна появиться справа от текста после анимации. Я получил идею с сайта под названием nopy.to. Я надеюсь, что вы можете мне помочь. Спасибо

Я уже попробовал: putting the button into an <a> and/or <p> over, under, next and before the slogan and/or EgraGmo, the same while putting it into a <div>, and all of it with and without the usage of id's.

Я ожидал, что кнопка «Форум» останется в центре сайта, а не под лозунгом. 

body {
    background-image: url("images/background.png");
    background-repeat: no-repeat;
    background-size: 100%;
    font-family: "Roboto";
    font-weight: 300;
    color: white;
    margin: 0;
}

.splashbox {
    background-color:RGBA(53,53,53,.4);
    text-align: center;
}

.Spltext {
    font-size: 70px;
    margin-top: 18%;
    padding-top: 20px;
    padding-bottom: 1px;
    animation-duration: 2s;
    animation-name: splTextLeft;
    animation-fill-mode: forwards;
    animation-delay: 1s;
}

.slogan_text {
    font-size: 30px;
    font-family: "Roboto";
    font-weight: 100;
    color: #A5C2FF;
}

.tolo_text span:nth-child(n+1) {
    color: #A5C2FF;
}

@keyframes splTextLeft {
    from    {margin-left: 0%;}
    to      {margin-left: -40%;}
}

@keyframes FRMButtonFadein {
    from {opacity: 0;}
    to {opacity: 1;}
}
<!DOCTYPE html>
<html lang="en">
<head>
        <style>
                #first {
                    float:center; /* add this */
                }
                #second {
                    overflow: hidden; /* if you don't want #second to wrap below #first */
                }
                    </style>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>EgraGmo - Welcome!</title>
    <link rel="stylesheet" href="styles/style.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,500,700&display=swap" rel="stylesheet">
</head>
<body>
    <div id="first" class = "splashbox">
        <div class="Spltext">
            <span class="tolo_text"><span>E</span>gra<span>G</span>mo</span>
            <p class="slogan_text">Insert slogan - Insert slogan</p>
            <div id="second"><button style="text-align: center;"class="ForumButton">Forum</button></div>
        </div>
</body>
</html>
...