如何在调整页面大小时防止div移动？

时间：2015-02-16 03:58:29

标签： html css resize

任何人都知道如何阻止“观看流”和“骰子游戏”这样移动？

screen recording

HTML：

<!doctype html>
<html>

        <head>
                <meta charset="UTC-8">
                <title>RLESSON85</title>
                <link href="main.css" rel="stylesheet">
        </head>

        <body>

                        <h1 class="index"><a href="index.html">HOME</a></h1>
                        <h1 id="indextitle">RLEESON85</h1>
                        <h1 id="stream"><a href="http://www.twitch.tv/rleeson85">WATCH THE STREAM</a></div>
                        <h1 id="dice"><a href="dice.html">DICE GAME</a></h1>

        </body>

</html>

CSS：

body {
        background: #333;
}

footer {
}

.index {
        font-family: bebas neue;
        font-size: 33px;
        font-style: inherit;
        font-weight: inherit;
        color: white;
        letter-spacing: 3px;
        float: left;
        margin-left: 30px;
        background: transparent;
        height: 60px;
        width: 140px;
        line-height: 60px;
        text-align: center;
        border-style: solid;
        border-width: 2px;
        border-radius: 6px;
        transition: all 0.3s ease 0s;
}
#indextitle {
        font-family: bebas neue;
        font-size: 190px;
        font-style: inherit;
        font-weight: inherit;
        color: white;
        letter-spacing: 5px;
        position: absolute;
        top: 30%;
        left: 50%;
        transform: translateX(-50%) translatey(-50%);
}

#dicetitle {
        font-family: bebas neue;
        font-size: 160px;
        font-style: inherit;
        font-weight: inherit;
        color: white;
        letter-spacing: 5px;
        position: absolute;
        top: 30%;
        left: 50%;
        transform: translateX(-50%) translatey(-50%);
}

#stream {
        font-family: bebas neue;
        font-size: 33px;
        font-style: inherit;
        font-weight: inherit;
        color: white;
        letter-spacing: 3px;
        position: absolute;
        top: 56%;
        left: 50%;
        transform: translateX(-50%) translatey(-50%);
        background: transparent;
        height: 60px;
        width: 320px;
        line-height: 60px;
        text-align: center;
        border: 0;
        border-style: solid;
        border-width: 2px;
        border-radius: 6px;
        transition: all 0.3s ease 0s;
}

#dice {
        font-family: bebas neue;
        font-size: 33px;
        font-style: inherit;
        font-weight: inherit;
        color: white;
        letter-spacing: 3px;
        position: absolute;
        top: 66%;
        left: 50%;
        transform: translateX(-50%) translatey(-50%);
        background: transparent;
        height: 60px;
        width: 200px;
        line-height: 60px;
        text-align: center;
        border: 0;
        border-style: solid;
        border-width: 2px;
        border-radius: 6px;
        transition: all 0.3s ease 0s;
}

.index:hover {
        font-family: bebas neue;
        font-size: 33px;
        font-style: inherit;
        font-weight: inherit;
        color: white;
        letter-spacing: 3px;
        float: left;
        margin-left: 40px;
        background: #777;
        height: 60px;
        width: 120px;
        line-height: 60px;
        text-align: center;
        border-style: solid;
        border-width: 2px;
        border-radius: 6px;
        transition: all 0.3s ease 0s;
}


#stream:hover {
        font-family: bebas neue;
        font-size: 33px;
        font-style: inherit;
        font-weight: inherit;
        color: white;
        letter-spacing: 3px;
        position: absolute;
        top: 56%;
        left: 50%;
        transform: translateX(-50%) translatey(-50%);
        background: #777;
        height: 60px;
        width: 300px;
        line-height: 60px;
        text-align: center;
        border: 0;
        border-style: solid;
        border-width: 2px;
        border-radius: 6px;
        transition: all 0.3s ease 0s;
}


#dice:hover {
        font-family: bebas neue;
        font-size: 33px;
        font-style: inherit;
        font-weight: inherit;
        color: white;
        letter-spacing: 3px;
        position: absolute;
        top: 66%;
        left: 50%;
        transform: translateX(-50%) translatey(-50%);
        background: #777;
        height: 60px;
        width: 180px;
        line-height: 60px;
        text-align: center;
        border: 0;
        border-style: solid;
        border-width: 2px;
        border-radius: 6px;
        transition: all 0.3s ease 0s;
}

a:link {
    text-decoration: none;
    color: white;
}

a:visited {
    text-decoration: none;
    color: white;
}

3 个答案:

答案 0 :(得分：1)

不要单独定位每个元素，而是定位整个块。

此外，您不应该将<h1>用于所有事情。

    <head>
            <meta charset="UTC-8">
            <title>RLESSON85</title>
            <link href="main.css" rel="stylesheet">
    </head>

    <body>

            <div class="index"><a href="index.html">HOME</a></div>
            <div class="maingroup">
                    <h1 id="indextitle">RLEESON85</h1>
                    <div id="stream"><a href="http://www.twitch.tv/rleeson85">WATCH THE STREAM</a></div>
                    <div id="dice"><a href="dice.html">DICE GAME</a></div>
            </div>
    </body>

CSS 

.maingroup {
    position: absolute;
    top: 50%;
    height: 450px;
    margin-top: -225px;
    text-align: center;
}

#stream, #dice {
    margin: 0 auto 20px;
}

See the JSFiddle

答案 1 :(得分：0)

我刚试过......只需将你想要在div中使用的类放在

中 

    <head>
            <meta charset="UTC-8">
            <title>RLESSON85</title>
            <link href="main.css" rel="stylesheet">
    </head>

    <body>

                    <div><h1 class="index"><a href="index.html">HOME</a></h1><div>  
                    <div><h1 id="indextitle">RLEESON85</h1></form></div>
                    <div><h1 id="stream"><a href="http://www.twitch.tv/rleeson85">WATCH THE STREAM</a></div>
                    <div><h1 id="dice"><a href="dice.html">DICE GAME</a></h1><div>

    </body>

答案 2 :(得分：0)

尝试这样的事情......

<强> HTML 

<div id="outerwrapper">
    <div id="innerwrapper">
        <p class="links"><a href="#">Home</a></p>
         <h1>RLEESSON85</h1>
        <p class="links"><a href="#">Watch the Stream</a>  <a href="#">Dice game</a></p>
    </div>
</div>

<强> CSS 

#outerwrapper {
    background:url("http://www.freeppt.net/background/violet-vector-leaves-circles-backgrounds-for-powerpoint.jpg") no-repeat left top;
    background-position:cover;
    height: 100%;
    position: absolute;
    width: 100%;
}
#innerwrapper {
    background-color:#333;
    position:absolute;
    width:100%;
    height:100%;
    transition: all 0.3s ease 0s;
}
.links a, links a:hover, links a:visited {
    color:white;
    text-decoration:none;
    padding:10px 25px;
    display:inline-block;
    border-radius:7px;
    border:1px solid white;
}
h1 {
    font-size:80px;
    color:white;
}

<强>脚本 

$(".links a").click(function () {
    $("#innerwrapper").css("height", "50%");
    setTimeout(function () {
        $("#innerwrapper").css("height", "100%");
    }, 2000);
});

Fiddle Demo

相关问题
最新问题