我已经给出了 2 个 div，当鼠标悬停在它上面时，它们会从屏幕右侧滑出。一个 div 包含一个图像，另一个包含一些标签和文本框。我将两个 div 都推向右侧，以便只有来 self 的图像的反馈字母可见。我的问题是，当在不同的显示器中查看网站时，div 不在我之前放置它们的位置。它只是在不同的显示器中随机移动。请帮忙。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body style="overflow-y: hidden">
<div id="slideout">![my outer div][1]
<img src="images/feedback_R.png" height="500px" width="800px" alt="Feedback" >
<div id="slideout_inner">
My Content goes here..
</div>
</div>
</body>
</html>
这是我使用的 CSS 样式。
<style>
#slideout {
position: fixed;
top: 50px;
left: 1300px;
z-index: 5000;
-webkit-transition-duration: 0.9s;
-moz-transition-duration: 0.9s;
-o-transition-duration: 0.9s;
transition-duration: 0.9s;
}
#slideout_inner {
position: fixed;
top: 180px;
z-index: 9999 ;
left: 1400px;
-webkit-transition-duration: 0.9s;
-moz-transition-duration: 0.9s;
-o-transition-duration: 0.9s;
transition-duration: 0.9s;
text-align: center;
cursor: pointer;
}
#slideout_inner textarea {
width: 190px;
height: 100px;
margin-bottom: 6px;
}
#slideout:hover {
left: 800px;
}
#slideout:hover #slideout_inner {
left: 900px;
}
</style>
最佳答案
使用 px 你不能将这些图像固定到所有屏幕尺寸，除非你使用媒体查询 或者你可以使用 0 px onload 制作图像，悬停时你可以像这样增加到 800px: 例如: 使用这种风格
#slideout {
position: fixed;
top: 50px;
z-index: 5000;
right: 0px;
-webkit-transition-duration: 0.9s;
-moz-transition-duration: 0.9s;
-o-transition-duration: 0.9s;
transition-duration: 0.9s;
}
#slideout:hover img{
width: 100%;
}
img{
width: 0px;
float: right;
-webkit-transition-duration: 0.9s;
-moz-transition-duration: 0.9s;
-o-transition-duration: 0.9s;
transition-duration: 0.9s;
}
此样式在所有屏幕尺寸下悬停时将图像宽度增加到 100%，如果您对此满意，也可将其应用于反馈内容
关于css - 如何阻止我的 Feedback Div 停止改变屏幕分辨率的位置？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20042150/