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：

position: relative;
overflow: hidden; 

由于这将是插件的一部分，我必须确保导出图标始终位于表顶部的右侧

如何在表格div的右上角放置图标div？

Answer 1

确保div具有与表格相同的宽度。  将text-align：rigth添加到div

Answer 2

您需要复制此类问题中的所有元素，但是为了让您在显示block组件（例如div）时获得一般意义，它会占用整个水平空间。

所以要移动i或span个inline元素，你可以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 3

您可以使用以下课程：

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