我有一个固定宽度的 div 容器，里面有一些元素，使用 position: absolute 放置。我有四个层来创建具有斜面图像和“开口”效果的效果。
现在可以正常使用了，您可以在下面的 jsfiddle 中看到。 ( jsfiddle - working Example ) 问题是，我怎样才能使它响应。我的意思不是针对移动设备，而是针对 100% 宽度的布局，其中窗口可以调整大小并且满足以下要求:
- “测试”文本和打开按钮始终位于中心的三个 Angular 区域的中心
- 左图和右图可以分别从左边(左图)和右边(右图)切出
我尝试使用 background-size: cover，但是当我调整浏览器窗口大小时它没有按预期工作。
这是我的代码(HTML):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Test</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="test.css">
<script src="jquery-1.11.1.js"></script>
</head>
<body>
<div id="slider">
<div class="img left"></div>
<div class="img right"></div>
<div class="text">
<h1>Test</h1>
<a href="#">open</a>
</div>
<div class="textLeft">
Duis at tincidunt erat. Nullam tellus mi, aliquam ultricies nisi ac, porttitor aliquam nulla. Donec scelerisque magna euismod purus imperdiet sollicitudin. Etiam vel lacus ex. Duis tempus urna eu volutpat tristique. Aenean vel ante pulvinar, sodales magna id, mollis urna. Duis at tincidunt erat. Nullam tellus mi, aliquam ultricies nisi ac, porttitor aliquam nulla. Donec scelerisque magna euismod purus imperdiet sollicitudin. Etiam vel lacus ex. Duis tempus urna eu volutpat tristique. Aenean vel ante pulvinar, sodales magna id, mollis urna.
</div>
<div class="textRight">
Duis at tincidunt erat. Nullam tellus mi, aliquam ultricies nisi ac, porttitor aliquam nulla. Donec scelerisque magna euismod purus imperdiet sollicitudin. Etiam vel lacus ex. Duis tempus urna eu volutpat tristique. Aenean vel ante pulvinar, sodales magna id, mollis urna. Duis at tincidunt erat. Nullam tellus mi, aliquam ultricies nisi ac, porttitor aliquam nulla. Donec scelerisque magna euismod purus imperdiet sollicitudin. Etiam vel lacus ex. Duis tempus urna eu volutpat tristique. Aenean vel ante pulvinar, sodales magna id, mollis urna.
</div>
</div>
<script>
$( "a" ).click(function() {
$( ".left" ).animate({
right: "850px",
}, 1000 );
$( ".right" ).animate({
left: "850px",
}, 1000 );
});
</script>
</body>
</html>
CSS:
#slider{
background-color: black;
position: relative;
height: 500px;
width: 1000px;
overflow: hidden;
}
#slider .img.left,
#slider .img.right{
height: 500px;
position: absolute;
top: 0;
}
#slider .img.left{
background-image: url(imgLeft.png);
right: 410px;
width: 590px;
z-index: 3;
}
#slider .img.right{
background-image: url(imgRight.png);
left: 250px;
width: 750px;
z-index: 2;
}
#slider .img.left.open{
right: 750px;
}
#slider .img.right.open{
left: 750px;
}
#slider .text{
color: white;
position: absolute;
bottom: 45px;
height: 100px;
width: 200px;
left: 45%;
z-index: 4;
}
#slider .textLeft,
#slider .textRight{
position: absolute;
color: white;
height: 300px;
width: 300px;
z-index: 1;
}
#slider .textLeft{
right: 100px;
top: 100px;
}
#slider .textRight{
left: 100px;
top: 100px;
}
a{
color: white;
}
因为更容易编辑和提出建议，我创建了一个 JSfiddle:
最佳答案
我试了一下 js fiddle，让你更进一步..
它还没有完全完成，因为您需要决定在第二段以中等屏幕宽度换行时如何处理。
它通过百分比宽度和 float 的组合来工作。
您的版本的主要问题有两点:
所有的绝对定位。
使用背景图片。
为了响应，图像理想情况下应该是内联的，因为浏览器会根据屏幕宽度调整它们的大小，只要它们的宽度和高度属性没有声明。
要完成这一步，您需要决定如何处理第二段，并开始研究媒体查询以在屏幕尺寸变小时稍微改变一下。
我已经为小于 480 像素的屏幕添加了一个示例查询，并进行了一些 css 调整，所以它几乎就在那里..(但文本很小!)
希望对你有帮助
祝你好运，尽情享受吧!
x
http://jsfiddle.net/h0rhay/2y17p1Lu/6/
关于javascript - 如何使具有多个绝对定位元素的 div 响应，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25783870/