Css 什么'；将拇指置于左侧，文本置于右侧的标准/最佳方式是什么？

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

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

元数据

结果应该是：

我不是在要求一种方法来做这件事。我在问关于跨浏览器兼容性和干净代码的最佳方法

谢谢

使用浮动

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

元数据

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

演示：

CSS:

浏览器屏幕截图：

---

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

这取决于是否有容器、容器是否高于元素、需要支持哪些浏览器以及缩略图是否大于文本/容器。请在您的用例中发布一个JSFIDLE。本例中的容器是没有高度的li。标题和元应该始终在一行上，这样他们就不会比拇指所做的扩展更多。所有现代浏览器+ie8。我不确定您的具体要求，但请查看此链接，它可能会对您有所帮助

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; }