怎么把文字放在图片前面？答案

【问题标题】：How to place the text before the image?怎么把文字放在图片前面？
【发布时间】：2013-03-23 14:08:46
【问题描述】：

我有一张图片，我想把文字放在图片的左侧，但我做不到。

以下是我的代码：

<div style="float:right; width:75%;">
<p style="float: left;">Affiliated to Board of Secondary Education Rajasthan, Jhunjhunu International School is purely english medium from LKG to 10th. It is equipped with most modern study and play equipment, which includes extramarks SMART LEARN CLASS, completely automated school automation software - SchoolPrime, SMS based parent information system, centralized  examination and evaluation, world class celebrations, hobby classes, personality development and above all, Professionally trained team of teachers.</p>

<p style="float: left;">View Details</p>
<img src="images/disp_1_jis_logo.jpg" style="float: right;">
</div>

这篇文章的screenshot is attached。谁能帮我把文字放在图片的左边？并将图像向上拉，使其与文本内联。

【问题讨论】：

标签： html css image css-float

【解决方案1】：

从 p 标签和 div 中删除 float:left 。

将display:inline-block 添加到 p 标签。

将图片标签移到顶部

<div style=" width:75%; display:inline-block">
<img src="images/disp_1_jis_logo.jpg" width="150"style="float: right;">
    <p>Affiliated..</p>
<p >View Details</p>

</div>

DEMO

【讨论】：

【解决方案2】：

如果您无法更改元素的顺序，请为第一个 p 元素添加宽度。

<p style="float: left; width: 50%">Affiliated ...</p>

【讨论】：

【解决方案3】：

试试这个：

<div style="float:right; width:75%;">

<p style="float: left; display: inline-block; width: 800px;"><img src="test.jpg" style="float: left; padding: 0px 10px 10px 0px;">Affiliated to Board of Secondary Education Rajasthan, Jhunjhunu International School is purely english medium from LKG to 10th. It is equipped with most modern study and play equipment, which includes extramarks SMART LEARN CLASS, completely automated school automation software - SchoolPrime, SMS based parent information system, centralized  examination and evaluation, world class celebrations, hobby classes, personality development and above all, Professionally trained team of teachers.
equipment, which includes extramarks SMART LEARN CLASS, completely automated school automation software - SchoolPrime, SMS based parent information system, centralized  examination and evaluation, world class celebrations, hobby classes, personality development and above all, Professionally trained team of teachers.</p>

<p style="float: left;">View Details</p>

</div>

【讨论】：

【解决方案4】：

这样想 - 默认情况下，每个块元素，如段落、图像或 div，都放置在从其容器元素左侧开始的新行上，例如页面的正文，或另一个 div。

要更改此默认放置，您可以将要移动的元素（在本例中为图像）浮动到您想要它所在的一侧，即<img src="images/disp_1_jis_logo.jpg" style="float: right;">，就像您在代码中所做的那样。这会将元素放在容器元素的最右侧，无论它在代码中的哪一行。任何后续元素都可以从同一行开始，并将放置在该行的左侧。所以，左边的段落应该是图片之后的下一个元素，即

<img src="images/disp_1_jis_logo.jpg" style="float: right;">
<p>Affiliated to Board of Secondary Education Rajasthan, Jhunjhunu International 
School is purely english medium from LKG to 10th. It is equipped with most modern
study and play equipment, which includes extramarks SMART LEARN CLASS, completely
automated school automation software - SchoolPrime, SMS based parent information 
system, centralized  examination and evaluation, world class celebrations, hobby 
classes, personality development and above all, Professionally trained team of 
teachers.</p>
<p>View Details</p>

您还可以将元素从其他块元素中浮动出来，即如果图像在第一个段落块内，它的行为方式类似。

【讨论】：

【解决方案5】：

试试这个。

<div style="float:right; width:75%;text-align: justify;">
<p style="float: left;">
Affiliated to Board of Secondary Education Rajasthan, 
<img src="images/disp_1_jis_logo.jpg" style=" float: right; margin:5px;">

Jhunjhunu 国际学校是从 LKG 到 10th 的纯英语媒介。它配备了最现代化的学习和游乐设备，其中包括加分项 SMART LEARN CLASS、-SchoolPrime、基于短信的家长信息系统、集中考试和评估、世界级庆祝活动、兴趣班、个性发展，最重要的是，经过专业培训的教师团队.

<p style="float: left;">View Details</p>
</div

【讨论】：