如何在含文本的div中固定图标至右上角（不受文本行数影响）

嘿，要实现不管div里文本多少行，图标都稳稳钉在右上角的需求，其实用相对定位+绝对定位是最靠谱的方案，比你原来用float的方式更稳定，我给你详细说说：

核心思路 #

给包含文本的父容器（也就是你的.box）设置position: relative，这样它就会成为内部绝对定位元素的参考基准。然后给图标元素设置position: absolute，再通过top和right属性直接把它定位到父容器的右上角，完全脱离文本流，不管文本怎么换行都不会影响它的位置。

优化后的代码示例 #

CSS 部分 #

.box {
  padding: 5px;
  width: 160px;
  /* 去掉固定height，让容器自适应文本高度 */
  margin-bottom: 30px;
  background-color: blue;
  line-height: 20px;
  color: white;
  /* 关键：设置相对定位，作为内部绝对定位元素的基准 */
  position: relative;
  /* 给图标留一点右侧内边距，避免贴在边缘 */
  padding-right: 25px;
}

.icon {
  color: red;
  /* 关键：绝对定位脱离文本流 */
  position: absolute;
  top: 5px;
  right: 5px;
}

HTML 部分 #

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="box">
  This is a sample text inside a sample box. This is a sample text inside a sample box.
  <span class="icon glyphicon glyphicon-plus"></span>
</div>
<div class="box">
  This is a sample text.
  <span class="icon glyphicon glyphicon-plus"></span>
</div>

为什么不用原来的float方案？ #

你原来用float: right的话，图标是跟着文本流排列的，如果文本行数多到撑满容器高度，图标可能会被挤到文本的下方，没办法一直保持在右上角。而绝对定位的方式完全脱离了文本流，只相对于父容器的位置来固定，不管文本有多少行都不会移位。另外我还去掉了.box的固定height，让容器可以自适应文本的高度，这样更灵活~

内容的提问来源于stack exchange，提问作者Mango D