如何将div移动到屏幕的右侧，但是div的左侧边框的文本对齐？

问题描述：

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

当我尝试这一点，一切都左对齐。如果我使用float：right，那么PTable和Notify是并排的。与PTable低于Notify相反。

我想要的是：通知顶部和内部div的所有文本在内部div的左边界对齐。通知下的PTable对齐了浏览器认为合适的方式。

我刷了你的代码。请编辑你想要的内容并添加到你的文章中，以便其他人可以更好地帮助你：http://jsfiddle.net/BramVanroy/E5umG/ – 2012-07-20 19:52:30

答

要在div#Notify上同时使用float: right和text-align: left以实现此效果。此外，为确保PTable不会显示在Notify旁边，请使用clear: both。

#Notify, #PTable { 
    clear: both; 
} 

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

JS小提琴：http://jsfiddle.net/SDDG2/2/

是的，他是对的。你有什么是99％正确:)但是，PTable不应该浮动：正确。通知和PTable应该清楚：两者。 – dotnetN00b 2012-07-20 19:55:56

我的不好，我误解了这个问题。现在答案应该是正确的。希望我帮助！ – JSW189 2012-07-20 19:58:32

你做到了！现在是100％正确:) – dotnetN00b 2012-07-20 19:59:35

答

你需要指定通知股利一个固定的宽度，这将确保PTABLE不是在它旁边。

出于好奇，这是HTML5和CSS 2/3的最佳做法吗？ – dotnetN00b 2012-07-20 20:00:40

答

这似乎工作！

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

谢谢JSW789和其他人回答！ – dotnetN00b 2012-07-20 19:59:08

答

可以移动DIV 的DIV上侧为前： -

$（ “＃父”）预定（$（ “＃外”））;

如何将div移动到屏幕的右侧，但是div的左侧边框的文本对齐？

相关推荐