的CSS股利留下100个％伸出父DIV

我是新来的CSS，花一些时间试图让这个工作的CSS股利留下100个％伸出父DIV

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

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

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

但是，如果我把div留到100％，它会导致它在父div之外渲染。

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

来源

2015-12-03 nojs

这是稍微不清楚你想要做什么。是[this]（http://jsfiddle.net/eL5rvnuk/）你想要什么......？ –

很不清楚你想要你的最终结果。 – Sgnl

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

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

看到小提琴http://jsfiddle.net/k7bLyfyq/8/

来源

2015-12-03 20:50:30

可以更改.right类的CSS属性产生预期的效果。我将left:100%属性更改为right:0%，并允许它符合父分区。我已经分叉你的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>

来源

2015-12-03 21:48:08

的CSS股利留下100个％伸出父DIV

回答

相关问题