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

时间:2012-07-20 19:47:56

标签: html css html5

这是我的代码:

<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低于通知。

我想要的是:在顶部通知并且其内部div中的所有文本在内部div的左边界上对齐。 Notify下的PTable统一了浏览器的适用方式。

4 个答案:

答案 0 :(得分:11)

您想在float: right上同时使用text-align: leftdiv#Notify来实现此效果。此外,要确保PTable不会显示在Notify旁边,请使用clear: both

#Notify, #PTable {
    clear: both;
}

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

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

答案 1 :(得分: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>

答案 2 :(得分:0)

您需要为Notify div指定固定宽度,这将确保PTable不在其旁边。

答案 3 :(得分:0)

你可以移动div的div上方 对于前: -                     

$( “#亲本”)前置($( “#外”));