Question

我有一个div容器，其宽度固定，里面有一些元素，使用position：absolute放置。我有四层可以创建一个带有斜面图像的效果和一个＆＃34;打开＆＃34;效果。

现在这个工作正常，你可以在下面的jsfiddle中看到。（jsfiddle - working Example）问题是，我怎样才能做出这种反应。我的意思是不是移动设备，而是100％宽度的布局，窗口可以调整大小并满足以下要求：

＆＃34; test＆＃34;文本和打开按钮始终位于中心的三角区域中
可以从左侧（左侧图片）和右侧（右侧图片）切割左右图像

我尝试使用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：

jsfiddle - working Example

Answer 1

我已经对js小提琴进行了抨击并且让你进一步了解...

它没有完全完成，因为你需要决定在第二段处于中等屏幕宽度时如何处理。

它通过百分比宽度和浮点数的组合工作。

您的版本的主要问题是两件事：

所有的绝对定位。

使用背景图片。

为了做出响应，理想的图像应该是内联的，因为浏览器会根据屏幕宽度调整它们的大小，只要它们的宽度和高度属性不被声明。

要完成此操作，您需要决定如何处理第二段，并开始查看媒体查询，以便在屏幕尺寸较小时稍微改变一下。

我已经为小于480px的屏幕添加了一个示例查询，并进行了一些css调整，所以它几乎就在那里..（但文字很小！）

希望它有所帮助，

祝你好运，享受！：

x

http://jsfiddle.net/h0rhay/2y17p1Lu/6/

Answer 2

最简单的方法是使用不同的css文件。

<link rel="stylesheet" type="text/css" href="style.css" media="screen and (max-width: 300px)" />

然后您可以轻松设置屏幕的宽度： enter link description here

这是屏幕分辨率的一个很好的链接。

如何使具有多个绝对定位元素的div响应

2 个答案: