什麼是標準/最好的方法將拇指放在左邊，文本放在右邊？

將圖像定位在左側並在其右側有兩個文本字段的最佳/標準方式是什麼？使用浮動？定位是什麼？什麼是標準/最好的方法將拇指放在左邊，文本放在右邊？

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

這應該是結果：

enter image description here

我不要求換一種方式來做到這一點。我正在尋求最佳的方式來完成跨瀏覽器兼容性和乾淨的代碼。

謝謝！

來源

2012-10-12 John

這取決於您是否有容器，是否比元素高，需要支持哪些瀏覽器以及縮略圖是否大於文本/容器。請用你的用例發佈一個jsFiddle。 –

這種情況下的容器是沒有高度的li。標題和meta應該總是在一行，所以它們不會比拇指已經做的更多地展開li。所有現代瀏覽器+ ie8。 – John

我不確定您的要求，但請檢查此鏈接，它可能會幫助您 http://stackoverflow.com/questions/12635007/difference-between-float-and-align-property-in-css –

使用浮動。

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

來源

2012-10-12 14:24:52 dreamerkumar

明顯的解決辦法是彩車：

演示：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中，內聯塊中斷並變爲全寬。

來源

2012-10-12 14:38:39

什麼是標準/最好的方法將拇指放在左邊，文本放在右邊？

回答

相關問題