堆疊/覆蓋div在右側對齊而不使用px

我有使用div作爲幫助按鈕。該按鈕使用浮動右對齊。
現在當'popHelp'彈出時，它會在左側對齊。
如何將它對齊在右側？
** @點擊=「popHelp」隱藏和顯示幫助堆疊/覆蓋div在右側對齊而不使用px

<div class="help3d"> 
    <div 
    @click="popHelp"> 
    <span>{{ helpLabel }}</span> 
    </div> 
    <div v-if="showHelp" id="popHelp"> 
    {{ helpL1 }} 
    </div> 
</div> 


.help3d { 
    display: inline-block; 
    float: right; 
    cursor: pointer; 
    border: 1 solid #000; 
    background-color: #c88; 
    position: static; 
} 
#popHelp { 
    position: absolute; 
    display: block; 
    right: auto; 
    top: auto; 
    z-index: 20; 
    background-color: #844; 
    color: #fff; 
    text-align: left; 
}

，如果我嘗試使用相對的，popHelp下，它的排水量任何股利。我希望它覆蓋它

來源

2017-08-15 SavageS

你的意思popHelp是左相對於對齊頁面或help3d？ – itodd

popHelp現在左對齊與help3d，我要它與help3d對齊 – SavageS

讓我知道如果這個CSS解決您的問題

.help3d { 
    display: inline-block; 
    float: right; 
    cursor: pointer; 
    border: 1 solid #000; 
    background-color: #c88; 
    position: relative; 
} 

#popHelp { 
    position: absolute; 
    display: block; 
    right: auto; 
    top: auto; 
    z-index: 20; 
    background-color: #844; 
    color: #fff; 
    text-align: left; 
    right: 0; 
}

來源

2017-08-15 04:11:53 itodd

這是更好。現在右側與help3d的右側對齊。但左側與help3d的左側對齊。我想左側向左擴展。我注意到兩個「右」，一個汽車和一個0.

我想如果我做第三個div是可以解決問題的正確寬度。

<div class="help3d"> 
    <div class="helpBtn" 
    @click="popHelp"> 
    <span>{{ helpLabel }}</span> 
    </div> 
    <div v-if="showHelp" id="popHelp"> 
    <div v-for="line in helpLines"> 
     <span>{{ helpL1 }}</span><br> 
    </div> 
    </div> 
</div>

現在我會玩help3d寬度。
越到後來
感謝

來源

2017-08-16 05:02:42 SavageS

是的，我幫了它。 – SavageS

讓我知道如果這個CSS解決您的問題

#popHelp { 
    background-color: #844; 
    color: #fff; 
    display: block; 
    float: right; 
    right: auto; 
    text-align: left; 
    top: auto; 
    z-index: 20; 
}

來源

2017-08-16 05:16:16 Jeeva

堆疊/覆蓋div在右側對齊而不使用px

回答

相關問題