CSSの - テーブルの右上にある位置div

Question

下記のスクリーンショットをご覧ください。テーブルの右上にエクスポートアイコンを配置したいと思います。 float:rightと指定すると、アイコンdivは表の横に配置されます。アイコンの右

<div style="float: right;"> 
     <i class="ebIcon ebIcon_export ebIcon_interactive" title="Export"></i> 
    </div> 

親のdiv：

フロートなし

height: 100%; 
padding: 16px 0; 

およびアイコンのdiv下表のdivがあります：

このよう0

position: relative; 
overflow: hidden; 

プラグインの一部になります、私は、エクスポートアイコンが右上側のI位置アイコンのdiv要素をどのように行う、常にテーブルの上の右側

上の位置を持っていることを確認する必要がありますテーブルdivの？

Answer 1

このタイプの質問ではすべての要素をコピーする必要がありますが、divなどのディスプレイblockのコンポーネントがある場合はいつでも一般的な意味合いを持たせる必要があります利用可能なスペース。

だから inline要素がある iか spanあなただけ text-align: rightを行うことができます移動します。ここ

は一例です：

div { 
 
    background: grey; 
 
    text-align: right; 
 
    padding: 1rem; 
 
} 
 
div span { 
 
    font-size: 3rem; 
 
}

<div> 
 
    <span>☺</span> 
 
</div>

ことを証明するために、 div（block要素）は、水平スパで拡大します私はそれに灰色の背景色を与えた。

そしてflex-boxがはるかに優れたソリューションである、フロートの使用を停止してください:)

Answer 2

次のクラスを使用することができます。

.clearfix:after { 
    content: " "; /* Older browser do not support empty content */ 
    visibility: hidden; 
    display: block; 
    height: 0; 
    clear: both; 
} 

<div style="float: right;"> 
    <i class="ebIcon ebIcon_export ebIcon_interactive" title="Export"></i> 
</div> 
<div class="clearfix"></div> 

Answer 3

はdiv要素は、テーブルと同じ幅を有していることを確認してください。 テキストアラインメントを追加する：