0

Wordpress サイトがあり、テーブルを使用してテキストを画像に揃えようとしています。

何らかの理由で、画像が私のサイトのテキストよりも高く表示されます

どんな援助でも大歓迎です。

ページはこちら: http://pictureperfect.kpwebservices.net/about/

これは私のコードです:

<table style="width: 86%;" border="0">
<tbody>
<tr>
<td width="50%"></td>
<td width="50%"></td>a
</tr>
<tr>
<td>Our aim is to ensure you look and feel your best on your special day. Whether it is your Wedding day, formal, Deb, Spring Carnival, photography and any occasion in between.

Picture Perfect Makeup is a mobile service catering Melbourne, surrounding and outer suburbs. We will come to your doorstep for your own comfort.

Mary Kechichian- Professional Makeup Artist and Stylist. Completed Training in Melbourne CBD with Elite Makeup Academy in advance Makeup artistry and Hair stylist.

Amongst my travels and learning Completed training in New York specialising in airbrushing, tattoo coverage with Kett Cosmetics.</td>
<td><img alt="" src="http://pictureperfect.kpwebservices.net/wp-content/uploads/2013/04/936482_507067716023365_1908922291_n.jpg" width="439" height="392" /></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tbody>

4

3 に答える 3

0

テキストには CSS 属性vertical-align: baselineがあります。これにより、その横の画像がテキストの最初の行のベースに揃えられます。

これを に変更してみてくださいvertical-align: top。

tdFirefox を使用している場合は、ページで [ツール] -> [Web 開発者] -> [インスペクター] を使用し、テキストが含まれている をクリックすると、これが実際に動作していることをすぐに確認できます。

于 2013-05-12T08:23:31.240 に答える
0

身長がどれだけ増えても、左側のブロックのテキストが上にくるように、垂直方向に揃える必要があります。次のようなものを使用します。

<tr>
    <td style="vertical-align: top;">Our aim is to ensure you look and feel your best on your special day. Whether it is your;Wedding day, formal, Deb, SpringCarnival, photography and any occasion in between.<p></p>
<p>Picture Perfect Makeup is a mobile service catering Melbourne, surrounding and outer suburbs. We will come to your doorstep for your own comfort.</p>
<p>Mary Kechichian- Professional Makeup Artist and Stylist. Completed Training in Melbourne CBD with Elite Makeup Academy in advance Makeup artistry and Hair stylist.</p>
<p>Amongst my travels and learning Completed training in New York specialising in airbrushing, tattoo coverage with Kett Cosmetics.</p></td>
<td class="odd"><img alt="" src="http://pictureperfect.kpwebservices.net/wp-content/uploads/2013/04/936482_507067716023365_1908922291_n.jpg" width="439" height="392"></td>
</tr>

スタイルはインラインですが、クラスに簡単に挿入して、クラスをこのセルに向けることができます。また、画像にマージンを入れるか、画像が配置されているセルにパディングを入れて、よりエレガントに見えるようにすることもお勧めします。

于 2013-05-12T08:26:05.707 に答える
0

テーブルをこれに置き換えてみてください：

<div style="width: 86%; position:relative; margin:0 auto;">


<div style="width:50%; float: left;">Our aim is to ensure you look and feel your best on your special day. Whether it is your;Wedding day, formal, Deb, SpringCarnival, photography and any occasion in between.</p>
<p>Picture Perfect Makeup is a mobile service catering Melbourne, surrounding and outer suburbs. We will come to your doorstep for your own comfort.</p>
<p>Mary Kechichian- Professional Makeup Artist and Stylist. Completed Training in Melbourne CBD with Elite Makeup Academy in advance Makeup artistry and Hair stylist.</p>
<p>Amongst my travels and learning Completed training in New York specialising in airbrushing, tattoo coverage with Kett Cosmetics.</div>

<div style="width:50%; float:right;"><img alt="" src="http://pictureperfect.kpwebservices.net/wp-content/uploads/2013/04/936482_507067716023365_1908922291_n.jpg" style="width:100%; max-width:439px; height: auto;" /></div>

</div>

ページのレイアウトに表を使用することは避け、適切な表形式のデータに使用するようにしてください。

お役に立てれば

于 2013-05-12T08:38:28.300 に答える