1

私は HTML と CSS が初めてで、このフォーラムも初めてです。ブラウザのズーム機能に問題があります。この写真のように、DIV の下部に画像を貼り付けたいと思います。 http://imageshack.us/a/img29/1417/n81h.png

しかし、ブラウザでズームすると、画像が移動し、次のように DIV の下部と整列しなくなります: http://imageshack.us/a/img14/221/vrqd.png

私はそれについて何ができますか？いろいろ調べましたが、明確な答えが見つかりません。ありがとう！

<head>
    <title>Portfolio</title>
    <link href="MyStyle.css" rel="stylesheet" type="text/css" />
</head>

<body style="background:#81DAF5">
    <div>
        <div ID="Page1">
            Welcome at my portfolio
            <div ID="Creative">Being creative is being me</div>
            <div><img id="head" src="head2.png"/></div>
        </div>            
        <div ID="Page2">Random Text 2 :)</div>
        <div ID="Page3">Random Text 3 :)</div>
    </div>        
</body>

}

#Page1{
    font-family:Cartoon;
    font-size:100px;
    text-align:center;
    background-color:#D8D0F4;   
    width:80%;
    height:80vh;   
    border-radius:60px;
    margin: 10vh auto 10vh auto;
    border: 10px solid #FFE1E1;
        
}

    
#Page2{
    font-family:Cartoon;
    font-size:30px;
    text-align:center;
    background-color:#D8D0F4;
    width:80%;
    height:80vh;
    border-radius:60px;
    margin: 20vh auto 10vh auto;
    border: 10px solid #FFE1E1;
}

#Page3{
    font-family:Cartoon;
    font-size:30px;
    text-align:center;
    background-color:#D8D0F4;
    width:80%;
    height:80vh;
    border-radius:60px;
    margin: 20vh auto 0vh auto;
    border: 10px solid #FFE1E1;
}
    
#Creative{
    font-family:cartoon;
    font-size:50px;
}
4

1 に答える 1

1

オブジェクトをどこかに貼り付けたい場合は、絶対配置を使用できます。div絶対配置を使用して親の固定された場所にオブジェクトを配置する場合、親divはそれ自体で何らかの位置 (固定、相対、絶対) を持つ必要があります (そうしないと、絶対配置はbody要素から発生します!!!)

したがって、結論として、あなたはposition:relativeあなたのためPage1 divに使用し、次にあなたのイメージが含まれているものposition:absolute;bottom:0;のために使用する必要divがあります!

于 2013-09-15T19:08:23.667 に答える