0

私は10ピクセルの太い境界線を持つdivを持っています。divの中には、写真といくつかのテキストがあります。 写真は境界線上でわずかに移動します（必須であり、境界線より上にある必要があります）。

<style>
#main
{
    border:10px solid red;
    width:400px;
}
.img-to-border
{
    margin-left:-10px;
    margin-top:-10px;
    position:relative;
    float:left;
}
.text{
    border:1px solid blue;
    text-align:right;
    padding-right:30px;
}
</style>

    <div id="main">
        <img src="https://www.google.by/logos/2012/slalom_canoe-2012-sr.png" alt="" class="img-to-border">
        <p class="text">DCBA padding-right of text is always 30px </p>
    </div>

動作するコードは次のとおりです 。jsFiddle 問題は、テキストが1〜4シンボル長い場合、テキストが落ちることです。しかし、私はそれを画像の上に配置したいと思います（上は、画面の上側から下側までではなく、zインデックスを意味します）。PSパディング右は常に30pxです。つまり、電卓で数字を入力するのとまったく同じように、画像の右から左、上に1行で入力します。私の例ではそれをどのように行うのですか？

繰り返しになりますが、申し訳ありませんが、写真は境界線上でわずかに移動しています（必須であり、境界線より上にある必要があります）。

4

2 に答える 2

1

テキストがその上を通過するように#main position:relative画像を作成できます。position:absoluteここで更新されたjsfiddleを確認してくださいhttp://jsfiddle.net/85Zk5/2/ （実際には、この方法でフロートは必要ありません.img-to-border。jsfiddleから削除できます。同じである必要があります）

于 2012-08-09T15:13:56.313 に答える
1

私はあなたの問題をきちんと理解することができません。1〜たくさんの文字で試してみましたが、テキストは常に同じ行に配置されているので、画像です。画像自体に問題がある場合は、次の作業を行うことができます

#main {position: relative;} /* Keep it just the same */

img {
   position: absolute;
   top: -10px; left: -10px;
}

画像はページに表示されませんが、テキストボックスにぶつかることなく表示されます。

これが実用的なフィドルです：http：//jsfiddle.net/BDFJM/

あなたの質問を間違った方法で受け取ったらごめんなさい。

于 2012-08-09T15:15:24.047 に答える