0

この画像リンクがあります：

<p class="alignright">
    <a target="_blank" href="...">
        <img width="230" height="158" align="right" style="margin-right: 30px;  margin-top: 20px;" src="some_source" >
    </a>
    text should go here
</p>

alignright クラスは次のようになります。

.alignright {
    float: right;
    margin: 4px 0 1px 10px;
}

上記の画像リンクの下にテキストを配置するためにいくつかのことを試しました (たとえば、 < br > と画像のキャプションを使用してみました) が、すべて失敗しました。テキストが左にずれすぎているか、画像リンクの下にさえありません。

画像リンクの下のテキストを取得する方法はありますか?

ありがとう！

4

4 に答える 4

1

テキストを画像リンクの左端に揃えたいということですか?

これは、両方の要素を 1 つのコンテナーに配置し、float:left プロパティをこのコンテナーに割り当てる必要があることを意味します。

これがあなたのサンプルに見られる「」だと思います。p-Element の幅が画像リンクの幅と同じであることを確認しましたか?

そうしないと、ページ上のどこにいても、テキストは p-border に揃えられます。

p-Element のサイズを縮小するか、すべてを追加のコンテナーに入れます。

<div style="float:right; width:#IMAGE_LINK_WIDTH#; text-align:left;">
  <a href="">IMAGE_LINK</a>
  <!-- A <br /> might be placed here -->
  Text
</div>
于 2012-09-05T12:49:45.290 に答える
1

<p class="alignright"></p>タグ付け後

<br style="clear: both;" />
some text here

画像の下にテキストが表示されます。

于 2012-09-05T12:36:40.290 に答える
0

ライブサンプル

spanaまたはdivwithclear:bothプロパティを追加して、必要に応じてテキストを揃えるだけです。

編集：

link画像の下のテキストpが

<p><a href="#">Your Text</a></p>

これを行うと、あなたlinkは次の行にp要素blockとして表示されます。

Block要素は、配置された位置の前後で改行を強制します。

デモを見る

于 2012-09-05T12:38:46.040 に答える
0

これはhtmlファイルです

<a href="#" target="_blank"><img src=""><span id="title" >your text</span></a>

これはcssファイルです

span#title {
text-align: center;
font-weight: bold;
}

span {
background: black;
bottom: 459px;
padding: 5px;
color: white;
opacity: 0.7;
position: absolute;
left: 8px;
width: 244px;
}

このようにしてみてください

于 2012-09-05T12:55:15.007 に答える