Question

我是CSS新手并花一些时间试图让这个工作

＆＃13;

.parent{
    position:relative;
    top:0;
    left:0;
    background:blue;
    width:300px;
    height:300px;
}.container{
    position:relative;
    width:100%
}.right{
    position:absolute;
    top:0;
    left:100%;
    background:red;
  width:20px
}.left{
    position:absolute;
    top:0;
    left:0%;
    background:red;
  width:20px
}

＆＃13;

  <div class="parent">
  <div class="container">
    <div class="right">
       right
    </div>
   <div class="left">
       left
    </div>
   </div>
</div>

＆＃13;

这里是小提琴http://jsfiddle.net/nojs/k7bLyfyq/

我想在两个div上使用左百分比，因为用户可以与它们进行交互，这使我更好地进行计算

但如果我把div放到100％，它会导致它在父div之外呈现。

有没有办法让它符合父div的宽度？

Answer 1

是的，当您使用绝对定位时，它会准确定位到您要求的位置。当你说100％离开时，它从100％开始，尝试添加changeSroll(current_items, infinite_scroll); 20px是div本身的宽度。

calc(100% - 20px)

请参阅小提琴http://jsfiddle.net/k7bLyfyq/8/

Answer 2

您可以更改.right类css属性以创建所需的效果。我将left:100%属性更改为right:0%，并允许它符合父div。我已经分了你的JSFiddle here :)。

Css和HTML：

.parent {
  position: relative;
  top: 0;
  left: 0;
  background: blue;
  width: 300px;
  height: 300px;
}
.container {
  position: relative;
  width: 100%
}
.right {
  position: absolute;
  top: 0;
  right: 0%;
  background: red;
  width: 20px
}
.left {
  position: absolute;
  top: 0;
  left: 0%;
  background: red;
  width: 20px
}

<div class="parent">
  <div class="container">
    <div class="right">
      right
    </div>
    <div class="left">
      left
    </div>
  </div>
</div>

Css Div离开父母div 100％

2 个答案: