0

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

以下是我的代码：

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

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

4

5 回答 5

2

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

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

演示

于 2013-04-02T10:13:27.703 回答
0

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

<p style="float: left; width: 50%">Affiliated ...</p>
于 2013-04-02T10:17:57.527 回答
0

试试这个：

<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>
于 2013-04-02T10:19:56.480 回答
0

可以这样想——默认情况下，每个块元素，如段落、图像或 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>

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

于 2013-04-02T10:31:03.670 回答
0

试试这个。 

<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
于 2013-04-02T10:50:48.127 回答