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

Question

这是我的代码：

<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 对齐浏览器认为合适的方式。

Answer 1

你想同时使用这两个float: right然后text-align: leftondiv#Notify来达到这个效果。此外，要确保 PTable 不会出现在 Notify 旁边，请使用clear: both.

#Notify, #PTable {
    clear: both;
}

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

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

Answer 2

这似乎有效！

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

您需要为 Notify div 指定一个固定的宽度，这将确保 PTable 不在它旁边。

Answer 4

您可以移动 div 的上侧 div 例如：-

$("#parent").prepend($("#outer"));