Question

我有一张图片，我想将文字放在图像的左侧，但我无法做到。

以下是我的代码：

<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。任何人都可以帮我把文字放在图像的左边吗？然后向上拉图像，使其与文本内联。

Answer 1

从p tag和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

Answer 2

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

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

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

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

您还可以将元素浮动到其他块元素之外，即如果图像位于第一个段落块内，它将以类似的方式运行。

Answer 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到10日的纯英语媒体。它配备了最现代化的学习和游乐设备，其中包括SMART LEARN CLASS，SchoolPrime，基于SMS的家长信息系统，集中考虑和评估，世界级的庆祝活动，业余爱好课程，个性发展以及专业训练的教师团队。。

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

如何在图像前放置文字？

5 个答案: