Làm cách nào để di chuyển div sang bên phải của màn hình nhưng có căn chỉnh văn bản của đường viền trái của div?

Question

đây là mã của tôi:

<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> 

Khi tôi cố gắng này, mọi thứ đều liên kết bên trái. Nếu tôi sử dụng float: phải, sau đó PTable và Notify là cạnh nhau. Trái ngược với PTable ở dưới Notify.

Điều tôi muốn là: Thông báo trên đầu và tất cả văn bản trong div bên trong của nó được căn chỉnh trên đường viền trái của div bên trong. PTable trong Notify liên kết cách trình duyệt thấy phù hợp.

Answer 1

Bạn muốn sử dụng cả hai float: right và sau đó text-align: left trên div#Notify để đạt được hiệu ứng này. Hơn nữa, để đảm bảo PTable không hiển thị bên cạnh Thông báo, hãy sử dụng clear: both.

#Notify, #PTable { 
    clear: both; 
} 

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

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

Answer 2

Bạn cần phải xác định một chiều rộng cố định cho Thông báo cho div, điều này sẽ đảm bảo rằng PTable không phải là bên cạnh nó.

Answer 3

Điều này dường như hoạt động!

<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

Bạn có thể di chuyển div phía trên của div cho ví dụ: -

$ ("# cha mẹ") thêm vào trước ($ ("# ngoài"));.