html - Css Div left 100% 伸出父 div

Question

我是 CSS 的新手，花了一些时间尝试让它工作

.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
}

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

这是 fiddle http://jsfiddle.net/nojs/k7bLyfyq/

我想在两个 div 上都使用 left percent，因为用户可以与它们交互，这让我更好地进行计算

但是如果我将 div 留到 100%，它会导致它呈现在父 div 之外。

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

Answer 1

是的，当您使用绝对定位时，它会准确定位到您要求的位置。当你说 100% left 时，它从 100% left 开始，尝试添加 calc(100% - 20px) 20px 是 div 本身的宽度。

.right{
    position:absolute;
    top:0;
    left: calc(100% - 20px);
    background:red;
    width:20px
}

参见 fiddle http://jsfiddle.net/k7bLyfyq/8/