Как выровнять Div на правом дне?

Question

Привет Я разрабатываю приложение MVC4. У меня есть один главный div внутри, у меня есть три тега div. Первые два тега div отображаются правильно в соответствии с моим требованием. Однако мой третий тег div появляется справа. Я хочу это в левой нижней части. Я пробовал все.

<div id="dialog" class="doc-verification-outer"> 
    <div id="data" style="width:70%;height:inherit;float:left" class="doc-verification"></div> 
    <div id="details" width="30%" style="float:right;height:50%; width:30%"></div> 
    <div id="dialog-form" title="Reject Reason"> 
     <div style="height:200px;"> 
      <input type="hidden" value="_upload_id" id="id" /> 
      <br /> 
      <label for="name">Select your reason</label> 
      <select id="comments"> 
       <option value="1">Incorrect Document</option> 
       <option value="2">document is not clear</option> 
       <option value="3">document is not valid</option> 
       <option value="4">other document</option> 
      </select> 
      <input type="button" id="reject" class="btn btn-primary btn-cons blue" value="Ok" onclick="reject();" tabindex="-1" style="float:right;"> 
     </div> 
    </div> 
</div> 

Может кто-нибудь дать некоторые идеи относительно этого? Большое спасибо ...

Answer 1

Вы можете попробовать это:

<div id="dialog" class="doc-verification-outer"> 
 
    <div id="data" style="width:70%;height:inherit;float:left" class="doc-verification"></div> 
 
    <div id="details" width="30%" style="float:right;height:50%; width:30%"></div> 
 
    <div id="dialog-form" title="Reject Reason"> 
 
     <div> 
 
      <input type="hidden" value="_upload_id" id="id" /> 
 
      <br /> 
 
      <label for="name">Select your reason</label> 
 
      <select id="comments"> 
 
       <option value="1">Incorrect Document</option> 
 
       <option value="2">document is not clear</option> 
 
       <option value="3">document is not valid</option> 
 
       <option value="4">other document</option> 
 
      </select> 
 
      
 
     </div> 
 
     <div style="margin-top:5px;"><input type="button" id="reject" class="btn btn-primary btn-cons blue" value="Ok" onclick="reject();" tabindex="-1" style="margin-left:122px;"></div> 
 
    </div> 
 
</div>

Answer 2

Я думаю, вы также должны разделить третью DIV на две части, чтобы правая часть должна совпадать с вашим второй ДИВ Попробуйте это:

<div id="dialog" class="doc-verification-outer"> 
    <div id="data" style="width:70%;height:inherit;float:left" class="doc-verification">First DIV</div> 
    <div id="details" width="30%" style="float:right;height:50%; width:30%">Second div</div> 
    <div style="clear:both"></div> 
    <div id="dialog-form" title="Reject Reason"> 
     <div style="height:200px;"> 
      <div style="width:70%;display:inline-block"> 
      <input type="hidden" value="_upload_id" id="id" /> 
      <br /> 
      <label for="name">Select your reason</label> 
      <select id="comments"> 
      <option value="1">Incorrect Document</option> 
      <option value="2">document is not clear</option> 
      <option value="3">document is not valid</option> 
      <option value="4">other document</option> 
     </select> 
      </div> 
      <div style="width:29%;display:inline-block"> 
       <input type="button" id="reject" class="btn btn-primary btn-cons blue" value="Ok" onclick="reject();" tabindex="-1" style="float:left;"> 
      </div> 
     </div> 
    </div> 
</div>