的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

回答

相關問題