如何使具有多個絕對定位元素的div響應

Question

我有一個具有固定寬度的div容器和其中的一些元素，這些元素使用position：absolute放置。 我分為四層，以創建帶有斜角圖像的效果和“開放”效果。

現在可以正常工作了，正如您在下面的我的jsfiddle中看到的那樣。 （ jsfiddle-工作示例）問題是，我該如何做出響應。 我的意思不是用於移動設備，而是用於100％寬度的布局，該窗口可以調整大小並滿足以下要求：

“測試”文本和打開按鈕始終位於中心的三角區域的中心
左右圖像可以從左（對於左圖）和右（對於右圖）切出

我嘗試使用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-工作示例

Answer 1

我對JS小提琴頗有興趣，可讓您更進一步。

它還沒有完全完成，因為當您以中等屏幕寬度換行時，您需要決定如何處理第二段。

它通過百分比寬度和浮點數的組合來工作。

版本的主要問題有兩點：

所有的絕對定位。

使用背景圖片。

為了響應，理想情況下圖像應該是嵌入式的，因為瀏覽器會根據屏幕寬度調整它們的大小，只要不聲明其width和height屬性即可。

要完成此操作，您需要決定如何處理第二段，並開始查看媒體查詢以在屏幕較小時進行一些更改。

我為屏幕小於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)" />

然后，您可以輕松設置屏幕的寬度：在此處輸入鏈接說明

這是“屏幕分辨率”的良好鏈接。

如何使具有多個絕對定位元素的div響應

問題描述

2 個解決方案

解決方案1
0 2014-09-11 13:06:57

解決方案2
-1 2014-09-11 09:43:22

如何使具有多個絕對定位元素的div響應

問題描述

2 個解決方案

解決方案1 0 2014-09-11 13:06:57

解決方案2 -1 2014-09-11 09:43:22

解決方案1
0 2014-09-11 13:06:57

解決方案2
-1 2014-09-11 09:43:22