Question

如何移动图像右侧的文字？我试图让它在移动设备上工作，我需要所有文本在右侧，左侧没有任何图像。就像两个不同的东西。

<div>
<a href="">
<img src="image.jpg" style="">
</a>
<a href="">Here goes the title and some of the content here here content title bla bla</a>     
</div>

我已经帮忙了 http://jsfiddle.net/nueZd/1/

Answer 1

不确定this是否正在寻找，但它对我有用。

<div>

<a href="" style="float:left;">
<img src="http://elegantthemes.com/preview/HandHeld/wp-content/uploads/et_temp/s-2-49840_72x72.jpg" style="">
</a>
<a href="">Here goes the title and some of the content here here content title bla bla</a>

</div>

Answer 2

您可以将图片设置为float:left，并在文字上设置margin 这将创建一个两列外观，其中图像下方没有文本。

http://jsfiddle.net/nueZd/4/

Answer 3

你想要的是漂浮。您可以将以下内容添加到样式属性：

style="float:left;"

这样一切都在右侧的图像周围流动。如果你想让它变得更好，你也可以添加一些填充：

style="float:left;padding-right:10px;"

Answer 4

我不明白。文本是位于图像的右侧，但由于没有空间而被包装。在浏览器中尝试使用html。如果你不想那样（包装），你可以为内容使用不同的div并限制它的高度和宽度和给它一个正确的浮动。

另请参阅[HTML5] [1]的W3Schools参考资料。它有一堆新标签可以将一种内容与另一种内容分开。

Answer 5

这是一个“虚拟”解决方案，包含小文本和两个单独的div

<div style="float:left;align:left;height:100%">
<a href="">
<img src="http://elegantthemes.com/preview/HandHeld/wp-content/uploads/et_temp/s-2-49840_72x72.jpg" style="">
</a></div>
<div>
<a href="">Here goes the title and some of the content here here </a>
</div>

合适的一个是make列，如下所示：

 <div style="float:left;width:15%;height:100%;padding-bottom:100%">

    <a href="">
    <img src="http://elegantthemes.com/preview/HandHeld/wp-content/uploads/et_temp/s-2-49840_72x72.jpg" style="">
    </a></div>
    <div style:="width:80%;float:right;margin: 0 auto;">
    <a href="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Nam pulvinar arcu ut dolor vulputate eu dictum nisl fringilla. Nam vel nisl erat. Pellentesque vel vulputate erat. Aliquam vestibulum rhoncus mi a vulputate. Vivamus venenatis tincidunt nibh in suscipit. Fusce non magna urna. Nunc tincidunt iaculis tortor eget fringilla. Cras placerat sodales metus ac cursus. 
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec malesuada vehicula mi, ac laoreet dolor elementum nec. 
Nunc blandit, est eget tincidunt ornare, magna nunc 
pellentesque magna, ac aliquet enim metus id velit. Nunc sollicitudin, dolor eu sodales sagittis, justo odio imperdiet tellus, et tempor magna
 risus quis felis. Nam semper, metus a tempor mattis, massa ante imperdiet elit, id euismod mi nunc vitae lorem. Suspendisse adipiscing mollis leo eu posuere</a>
    </div>

简单的css修改，只显示图像右侧的文本

5 个答案: