在多行文本中将图像浮动到右上角

Question

我希望图标保持在右上角。我尝试了很多东西，但似乎没有任何效果。只有当文本很长或在较小的设备上时才会出现问题。

.container {
  float: left;
  position: relative;
  width: 50%;
}
.image-right {
  float: right;
  position: relative;
}

<div class="container">
  <h3>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua 
    <span class="image-right">
      <img style="width:13px; height:13px" src="http://findicons.com/files/icons/2354/dusseldorf/32/plus.png">
    </span>
  </h3>
</div>

Answer 1

这是一个答案。你应该使用 position: absolute;

.container{
    float: left;
    position: relative;
    width: 50%;
}

.container h3 {
  position: relative;
}

.image-right  {
    float: right;
    top: 0;
    right: 0;
    position: absolute;
}

<div class="container">
  <h3>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua 
    <span class="image-right">
      <img style="width:13px; height:13px" src="http://findicons.com/files/icons/2354/dusseldorf/32/plus.png">
    </span>
  </h3>
</div>

Answer 2

将图像放在 h3 标签内的文本之前。正如 http://www.w3schools.com/css/css_float.asp、

上所说

Elements after a floating element will flow around it.

<style>
.container{
    float: left;
    position: relative;
    width: 50%;
}

.image-right  {
    float: right;
    position: relative;
}
</style>
</head>


<div class="container">
<h3>
  <img style="width:13px; height:13px" src="http://findicons.com/files/icons/2354/dusseldorf/32/plus.png"
      class="image-right">

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua 


</h3>
</div>

在多行文本中将图像浮动到右上角

Float image to the top right in multi-line text

css

css-float