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 回答