css - 将拇指放在左侧并将文本放在右侧的标准/最佳方式是什么？

Question

将图像定位在左侧并在其右侧有两个文本字段的最佳/标准方法是什么？使用花车？定位？

<li>
<a href=""> <img src=""THUMB HERE /> </a>
<a href=""> TITLE </a>
<span> META DATA </span>
</li>

这应该是结果：

我不是在寻求一种方法来做到这一点。我正在寻求关于跨浏览器兼容性和干净代码的最佳方法。

谢谢！

Answer 1

使用花车。

<li>
<div style="float:left">
<a href=""> <img src=""THUMB HERE /> </a>
</div>
<div style="float:left;padding-left:10px">
<a href=""> TITLE </a>
<span> META DATA </span>
</div>
<div style="clear:both">
</div>
</li>

Answer 2

显而易见的解决方案是浮动：

演示：http: //jsfiddle.net/SO_AMK/wA8dj/

CSS：

li { display: inline-block; }
/* Keep it from being full width, if you define a width, skip this. */
li span.left { float: left; }
li span.right { float: right; }

浏览器截图：http: //imageshack.us/g/1/9808161/

屏幕截图是 FX11、Chrome 18、Safari 5.1 和 IE 8 和 9。在 IE 7 中，内联块中断并变为全宽。