如何使用 HTML and/or CSS 让图像始终显示在某些关联文本的右侧？

Question

我知道了 HTML:

<div>This page provides a brief overview of the travel process, as well as many of the resources that travelers need. For guidance on best travel practices, see <a href="bla.com" target="_blank">Key Tips for UCSC Travelers</a>, which was designed to provide tips of preparing, booking, and reimbursement of travel expenses.<span><img class="ucsc_image_dynamic_size" alt="Access Connexxus Booking Tool" src="/PublishingImages/access_connexxus.gif"/></span></div>

我希望文字出现在图片的左侧（而不是上方）；我怎样才能用 HTML and/or CSS?

原样，看起来像这样：

更新

在回答评论中的问题时，这里是 class 图片使用的：

.ucsc_image_dynamic_size {
    position: relative;
    top: 0px;
    right: 0px;
    width: auto;
    height: auto;
}

Answer 1

确定你只需要先把图片的HTML放上去，然后再浮动就可以了吗？

<div>
    <img class="ucsc_image_dynamic_size" alt="Access Connexxus Booking Tool" src="/PublishingImages/access_connexxus.gif"/>
    This page provides a brief overview of the travel process, as well as many of the 
    resources that travelers need. For guidance on best travel practices, see 
    <a href="bla.com" target="_blank">Key Tips for UCSC Travelers</a>, 
    which was designed to provide tips of preparing, booking, and reimbursement of travel expenses.
</div>

CSS:

.ucsc_image_dynamic_size {
    float: right;
    margin: 0 0 0.5em 1em;
}

还是我遗漏了什么？ JSFiddle 示例（带有占位符图像）：http://jsfiddle.net/4s8evpod/1/

Answer 2

另一种选择是使用 flexbox 进行布局。

<style>
  .outer {
    display: flex;
  }   
</style>

<div class='outer'>
  <div>    
    This page provides....
  </div>
  <div>
    <img>
  </div>
</div>

Example JSFiddle here.

如何使用 HTML and/or CSS 让图像始终显示在某些关联文本的右侧？

How can I get an image to always appear to the right of some associated text using HTML and/or CSS?

html

css

sharepoint-2010

更新