html - 如何使用 HTML 和/或 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 和/或 CSS 实现这一点？

原样，它看起来像这样:

更新

在回答评论中的问题时，这里是图像使用的类:

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

Answer 1

确定你只需要先放图片的HTML，然后再 float 就可以了吗？

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