Html 如何将 div 移动到屏幕右侧，但让 div 左边框的文本对齐？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11586051/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I move a div over to the right side of the screen but have the text align of the left border of the div?
提问by dotnetN00b
here's my code:
这是我的代码：
<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>
When I try this, everything is aligned to the left. If I use float:right, then PTable and Notify are side by side. As opposed to PTable being below Notify.
当我尝试这个时，一切都向左对齐。如果我使用 float:right，那么 PTable 和 Notify 是并排的。与 PTable 低于 Notify 不同。
What I would like is: Notify on top and all the text in its inner div aligned on the left border of the inner div. PTable under Notify aligned how the browser sees fit.
我想要的是：在顶部通知并且其内部 div 中的所有文本都与内部 div 的左边框对齐。通知下的 PTable 对齐浏览器认为合适的方式。
回答by JSW189
You want to use both float: rightand then text-align: lefton div#Notifyto achieve this effect. Further, to make sure PTable does not show up beside Notify, use clear: both.
你想同时使用float: right，然后text-align: left就div#Notify达到这种效果。此外，为了确保 PTable 不会出现在 Notify 旁边，请使用clear: both.
#Notify, #PTable {
clear: both;
}
#Notify {
float: right;
text-align: left;
}
JS Fiddle: http://jsfiddle.net/SDDG2/2/
JS小提琴：http: //jsfiddle.net/SDDG2/2/
回答by dotnetN00b
This seems to work!
这似乎有效！
<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>
回答by Ashish Bardiya
You can move div upper side of div for ex:-
您可以移动 div 的 div 上侧，例如：-
$("#parent").prepend($("#outer"));
$("#parent").prepend($("#outer"));
回答by Khallil Mangalji
You need to specify a fixed width for the Notify div, this will ensure that PTable is not beside it.
您需要为 Notify div 指定固定宽度，这将确保 PTable 不在其旁边。
