「位置：絕對」不工作，使div按鈕粘到另一個div的右下角

Question

只是給出一個簡要背景：我有一個模式，在我的頁面中被一個自定義的AngularJS指令調用。我一直試圖讓模態棒中的按鈕在div的右側無效。

我一直在使用位置的嘗試：絕對的，因爲這就是這裏說的其他的解決方案，但它不是爲我工作。我究竟做錯了什麼？

這裏是我的代碼：

HTML：

<div class='readMore_title'>Welcome!</div></br> 
    <div class='readMore_desc' style="padding:0px !important"> 
     <div class="question-content-wrapper"> 
     <div class="ng-modal-number-container"> 
      <div class="questionNumbers" ng-repeat="item in numberOfQuestions"> 
       <div class="questionNumberIcon" ng-style="item === currentQuestionIndex + 1 ? { 'background-color':'#455867', 'color': '#fff' } : {'background-color':'#fff', 'color': '#000 '}">{{item}}</div> 
      </div> 
     </div> 
    </div> 


    <div style="padding-left:12px;padding-top:23px;word-wrap:break-word" ng-if="showWelcomeMessage"> 
     <p class="wizard-welcome-message"> 
      Click "Next" to begin. 
     </p> 

     <div class="carousel-wizard-btn-container"> 
      <div class="carousel-wizard-buttons" ng-click="wizardPrevious()" ng-hide="currentQuestionIndex == 0">Previous</div> 
      <div class="carousel-wizard-buttons" ng-click="disableWizardFeatures() || wizardNext()" ng-hide="currentQuestionIndex == wizardQuestionSet.length - 1" ng-disabled="showWelcomeMessage === true ? false : disableWizardFeatures()">Next</div> 
      <div class="carousel-wizard-buttons" ng-click="disableWizardFeatures() || showResults() " ng-show="currentQuestionIndex == wizardQuestionSet.length - 1" ng-disabled="disableWizardFeatures()">Finish</div> 
     </div> 

    </div> 


    <div style="word-wrap:break-word; padding-top:4px; padding-left:14px" ng-if="showWelcomeMessage === false ? true : false"> 
     <p class="wizard-question"> 
      <span style="font-family:'MetricWeb-Semibold'">Question {{currentQuestionIndex+1}}:</span>&nbsp;&nbsp;{{currentQuestionObject.question}} 
     </p> 

     <ul style="padding-left:30px;"> 
      <div> 
       <li ng-repeat="query in currentQuestionObject.choices" style="padding-bottom:5px;"> 
        <input class="TWInputField" name="{{currentQuestionObject.inputType}}" 
        type="{{currentQuestionObject.inputType}}" id="{{query.id}}" 
        ng-model="query.value" ng-change="changeOnSelection(query.value, query.id);choicesSelected = query.value" 
        ng-value="true"> 
        <label for="{{query.id}}" style="font-family:'MetricWeb-Regular';font-size:17px;cursor:pointer">&nbsp;&nbsp;{{query.answer}}</label> 
       </li> 
       <p class="msg-required" ng-show="disableWizardFeatures()">Input is required.</p> 

      <div class="carousel-wizard-btn-container"> 
       <div class="carousel-wizard-buttons" ng-click="wizardPrevious()" ng-hide="currentQuestionIndex == 0">Previous</div> 
       <div class="carousel-wizard-buttons" ng-click="disableWizardFeatures() || wizardNext()" ng-hide="currentQuestionIndex == wizardQuestionSet.length - 1" ng-disabled="showWelcomeMessage === true ? false : disableWizardFeatures()">Next</div> 
       <div class="carousel-wizard-buttons" ng-click="disableWizardFeatures() || showResults() " ng-show="currentQuestionIndex == wizardQuestionSet.length - 1" ng-disabled="disableWizardFeatures()">Finish</div> 
      </div> 

     </div> 
    </ul> 
    </div> 

</div> 

CSS：

div.carousel-wizard-btn-container { 
    /*right:5%;*/ 
    bottom:3%; 
    position:relative; /* It's "relative" because "absolute" makes it overlap with the content text.*/ 
} 

div.carousel-wizard-buttons { 
    background-color:#01a982; 
    color:#fff; 
    font-weight:bold; 
    text-align:center; 
    width:110px; 
    display:inline-block; 
    padding-top:8px; 
    padding-bottom:8px; 
    bottom:100px; 
    font-family:'MetricWeb-Bold'; 
    cursor:pointer; 
} 

這是它目前的樣子：

任何幫助將一如既往地讚賞（CSS真的不是我的特長，可悲......）。

謝謝。

更新1：設置carousel-wizard-btn-container的位置absolute返回此：

設置按鈕float:right返回此：

更新2：包裹着按鈕亞瑟建議的另一個div。結果是現在這個。

幾乎那裏，除了按鈕是模態外部。 :(我試圖把DIV包裝了問題無果的一個內：

<div style="word-wrap:break-word; padding-top:4px; padding-left:14px" ng-if="showWelcomeMessage === false ? true : false"> 
    <p class="wizard-question"> 
     <span style="font-family:'MetricWeb-Semibold'">Question {{currentQuestionIndex+1}}:</span>&nbsp;&nbsp;{{currentQuestionObject.question}} 
    </p> 

    <ul style="padding-left:30px;"> 
     <div> 
      <li ng-repeat="query in currentQuestionObject.choices" style="padding-bottom:5px;"> 
       <input class="TWInputField" name="{{currentQuestionObject.inputType}}" 
        type="{{currentQuestionObject.inputType}}" id="{{query.id}}" 
        ng-model="query.value" ng-change="changeOnSelection(query.value, query.id);choicesSelected = query.value" 
        ng-value="true"> 
       <label for="{{query.id}}" style="font-family:'MetricWeb-Regular';font-size:17px;cursor:pointer">&nbsp;&nbsp;{{query.answer}}</label> 
      </li> 
      <p class="msg-required" ng-show="disableWizardFeatures()">Input is required.</p> 
     </div> 
    </ul> 

    <div style="float:right"> 
     <div class="carousel-wizard-btn-container"> 
      <div class="carousel-wizard-buttons" ng-click="wizardPrevious()" ng-hide="currentQuestionIndex == 0">Previous</div> 
      <div class="carousel-wizard-buttons" ng-click="disableWizardFeatures() || wizardNext()" ng-hide="currentQuestionIndex == wizardQuestionSet.length - 1" ng-disabled="showWelcomeMessage === true ? false : disableWizardFeatures()">Next</div> 
      <div class="carousel-wizard-buttons" ng-click="disableWizardFeatures() || showResults() " ng-show="currentQuestionIndex == wizardQuestionSet.length - 1" ng-disabled="disableWizardFeatures()">Finish</div> 
     </div> 
    </div> 

</div> 

Answer 1

如何浮動：正確的如果你能發佈工作示例或鏈接它會更容易，因爲也許這個問題是來自其它地方

.carousel-wizard-buttons{ 
    float:right; 
}