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

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

要素の順序を変更できない場合は、最初の p 要素に幅を追加します。

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