7

ここに私のコードがあります:

<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 の左端に揃えることです。Notify の下の PTable は、ブラウザがどのように適合するかを調整します。

4

4 に答える 4

11

この効果を得るには、両方を使用してfloat: rightからtext-align: leftonを使用します。div#Notifyさらに、PTable が Notify の横に表示されないようにするには、 を使用しますclear: both。

#Notify, #PTable {
    clear: both;
}

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

JS フィドル: http://jsfiddle.net/SDDG2/2/

于 2012-07-20T19:50:20.843 に答える
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>
于 2012-07-20T19:58:19.890 に答える
0

Notify div の固定幅を指定する必要があります。これにより、PTable がその横にないことが保証されます。

于 2012-07-20T19:52:23.950 に答える
0

例: div の div の上部を移動できます:-

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

于 2015-06-30T10:36:04.743 に答える