Come si sposta un div sul lato destro dello schermo ma il testo è allineato al bordo sinistro del div?

Question

ecco il mio codice:

<div id="Notify" style="clear:both;"> 
    <div style="text-align:right;"> 
     <div style="text-align:left;"> 
      Send Table to Standards By Email. (everything below is a placeholder) 
      <br /><br /> 
      Saved at: @DateTime.Now.ToString() 
      <br /> 
      Saved by: 107 
      <br /><br /> 
      <input type="submit" value="Send Email" /> 
     </div> 
    </div> 
</div> 
<br /> 
<br /> 
<div id="PTable"> 
    Products Table Placeholder 
</div> 

Quando provo questo, tutto è allineato a sinistra. Se utilizzo float: right, PTable e Notify sono affiancati. Al contrario di PTable sotto Notifica.

Quello che vorrei è: Notifica in alto e tutto il testo nel suo div interno allineato sul bordo sinistro del div interno. PTable in Notifica ha allineato il modo in cui il browser ritiene opportuno.

Answer 1

Si desidera utilizzare entrambi float: right e quindi text-align: left su div#Notify per ottenere questo effetto. Inoltre, per assicurarsi che PTable non venga visualizzato accanto a Notifica, utilizzare clear: both.

#Notify, #PTable { 
    clear: both; 
} 

#Notify { 
    float: right; 
    text-align: left; 
} 

JS Fiddle: http://jsfiddle.net/SDDG2/2/

Answer 2

è necessario specificare una larghezza fissa per il div Notifica, questo farà sì che ptable non è accanto.

Answer 3

Questo sembra funzionare!

<div id="Notify" style="clear:both;"> 
    <div style="float:right;"> 
     <div style="text-align:left;"> 
      Send Table to Standards By Email. (everything below is a placeholder) 
      <br /><br /> 
      Saved at: @DateTime.Now.ToString() 
      <br /> 
      Saved by: 107 
      <br /><br /> 
      <input type="submit" value="Send Email" /> 
     </div> 
    </div> 
</div> 
<br /> 
<br /> 
<div id="PTable" style="clear:both;"> 
    Products Table Placeholder 
</div> 

Answer 4

È possibile spostare div lato superiore del div ad es: -

$ ("# padre") prepend ($ ("# esterno"));.