1

我必须显示两个 div（进出），以便它们一个位于左侧，另一个位于右侧。

使用这个 css 代码，它们非常适合全屏显示，但我希望能够将它们放入父 div 中，这将是容器

#in{
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      width: 50%;
      overflow: auto;
      font-size: 12px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    }

#out{
      position: fixed;
      top: 0;
      right: 0;
      left: 50%;
      bottom: 0;
      overflow: auto;
      padding: 10px;
      padding-left: 20px;
      color: #444;
      font-family:Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
      font-size: 16px;
      line-height: 1.5em
    }

任何人都可以帮我修改这段代码吗？

谢谢

4

3 回答 3

5

使用时position: fixed;，它将元素固定到屏幕上。你不能用 CSS 相对于一个元素来定位它，事实上，如果你考虑一下position: fixed你永远不想相对于一个元素来定位它，并且认为这对我来说听起来是不可能的。固定定位的元素被从流中取出，因此它相对于视口，您不能只是将它放回流中的某个位置。

于 2013-09-10T17:17:52.753 回答
4

我不确定这是否正是您要寻找的，但本质上 kmmathis 是正确的。http://jsfiddle.net/R8bUQ/

标记：

<div>
    <div>
    </div>
</div>

和CSS：

div {
    height: 800px;
    width: 300px;
    background: #f0f;
    margin-top: 80px;
    margin-left: 180px;
    position: relative;
}
div div {
    height: 20px;
    width: 100%;
    background: #0f0;
    position: absolute;
    margin: 0;
    top: 0;
    left: 0;
}

和JS：

$parent = $('div').eq(0);
$elem = $parent.find('div');

$(window).scroll(function(){ 
    $elem.css('top', $(window).scrollTop());
}).trigger('scroll');

基本上，您将子项设置为相对于其父项进行定位，并且当您滚动时，窗口滚动的量设置top了元素的 。它是固定定位，但相对于其父级定位。这不是 100%，但它可能会让你对如何完成你想要的事情有一个基本的了解。

于 2013-09-10T17:10:53.283 回答
3

使用时，position:fixed;您将元素相对于浏览器窗口定位。

要使用您自己的父容器，您需要设置#in 和#out 使用position:absolute;，然后将它们包装在一个容器中，比如说#wrap，它已经position:relative;设置好了。

编辑：这是一个小提琴：http: //jsfiddle.net/ktAAa/

于 2013-09-10T17:02:13.867 回答