Question

我有一个由两个div控制的中间div作为按钮，位于该中间div的右侧和左侧。要将这两个div作为控制按钮，它们必须处于固定位置。问题是我想要包装在包装器div中的两个固定div，其宽度为80％并具有自动边距，因此当缩放窗口时，这两个div将保留在“中间div”的两侧。

这是将这两个div作为控制按钮的脚本：

 $(document).ready(function () {
       $("#right").click(function () { 
       var leftPos = $('.DivDataMain').scrollLeft();
       $(".DivDataMain").animate({scrollLeft: leftPos + 250}, 800);
  });   

       $("#left").click(function () { 
       var leftPos2 = $('.DivDataMain').scrollLeft();
       $(".DivDataMain").animate({scrollLeft: leftPos2 - 250}, 800);
  });   
       });

这里的css应该让这两个div必须位于中间div的两侧：

.DivDataMain {
     width:100%;
     overflow:hidden;
     display:block; 
     background:#000; 
     height:400px; 
     margin:auto;
     position: relative;
}

#left {
     width:60px;
     overflow:hidden;
     display:block;
     background:rgba(204, 204, 204, 0.5); 
     height:200px;
     float:left; 
     clear:none; 
     position:fixed; 
     z-index:2;}

#right {
    width:60px;
    overflow:hidden;
    display:block;
    background:rgba(204, 204, 204, 0.5); 
    height:200px;
    clear:right;
    right: 0;
    position:fixed;
    z-index:3;}

#midleBody {
   width:auto;
   overflow:hidden;
   display:block;
   background:#CFC;
   height:200px;
   float:left; 
   clear:none; 
   position:fixed; 
   z-index:1;
}

接下来是演示：Left Div & Right Div overlap

先谢谢

Answer 1

我认为这就是你想要的......

Updated Fiddle

有几件事：

对于正确的div的定位，我无法想到使用固定定位而不使用calc的任何其他方法。这意味着这在IE8中不起作用（希望这不是太大的交易）。
我修复了你的jQuery。您想要滚动midleBody的内容而不是DivDataMain。
迷你重置（css中的*位）本身并不是必需的，但是因为固定元素相对于视口而不是最近的定位祖先定位，所以如果你有正确div的定位计算将会关闭DivDataMain div的包含元素上的任何边距/填充。
我还必须更改标记中的源顺序才能使其正常工作。
就个人而言，我会考虑采用不同的方法。这对我来说似乎非常脆弱，我不喜欢这种特殊情况下的计算选项，因为没有后备。也许我会用啤酒来思考它，然后再向你提出其他建议。

同时，这是对布局/代码/标记的工作更新。

<强> HTML：

<div class="DivDataMain">
    <div id="left">left</div>
    <div id="right">right</div>
    <div id="midleBody">
        <p>The content of the midle body content of the midle body The content of the midle bodycontent of the midle body The content of the midle bodycontent of the midle body The content of the midle body</p>
    </div>
</div>

CSS：

* {
    margin:0;
    padding:0;
}
.DivDataMain {
    width:80%;
    overflow:hidden;
    position: relative;
    background:#000;
    height:400px;
    margin:auto;
}
#left, #right {
    width:60px;
    overflow:hidden;
    background:rgba(204, 204, 204, 0.5);
    height:200px;
    position:fixed;
    z-index:10;
    line-height: 200px;
    text-align: center;
    cursor: pointer;
}
#right {
    left: calc(90% - 60px);
}
#midleBody {
    overflow:hidden;
    white-space: nowrap;
    background:#CFC;
    height:200px;
}

<强> jQuery的：

 $(document).ready(function () {
     $("#right").click(function () {
         var leftPos = $('#midleBody').scrollLeft();
         $("#midleBody").animate({
             scrollLeft: leftPos + 250
         }, 800);
     });

     $("#left").click(function () {
         var leftPos2 = $('#midleBody').scrollLeft();
         $("#midleBody").animate({
             scrollLeft: leftPos2 - 250
         }, 800);
     });
 });

将Div定位到Div的右侧并将其保持在包装中

1 个答案:

Updated Fiddle