0

テキストリンクの最後に絶対ポップアップボックスを配置したい。

HTML

<div style="float:left;">Hello World</div><div class="box">BOX</div>

CSS

.box
{
    float:left;
    border-color:#000;
    border-style:solid;
    border-width:1px;
    width:80px;
    height:80px;
    text-align:center;
}

ここに画像の説明を入力

http://jsfiddle.net/7N6ye/1/

ボックスが相対的な場合にのみ正常に機能します。position:absolute箱にセットするとこんな感じ

ここに画像の説明を入力

http://jsfiddle.net/7N6ye/3/

何か案は？最終的に、それぞれテキストの長さが異なるリンクのリストができあがります。(そして、各ボックスはテキストの最後にポップアップ表示されます)。

4

2 に答える 2

1

位置を相対に設定すると、div は元の位置に相対的に配置されます。例: 現在地から左に 100px

位置を絶対に設定すると、div はその親 (相対位置または絶対位置を持つ次の親) に対して相対的に配置されます。例: 親の左隅から 100px

その上、div はもはやドキュメント フローの一部ではありません。したがって、他の要素はそれと重複する可能性があります。

同じことがフローティング要素にも当てはまります。ここでは、次に使用可能な位置が使用されます。

一般に、絶対位置とフロートを設定することは意味がありません。

于 2013-03-19T21:43:00.227 に答える
1

これはうまくいくかもしれません：

<div  class="box">Hello World<div>BOX</div></div>

CSSで：

.box {
    position: relative;
    border: 1px solid red;
    float: left;
}
.box div
{
    position:absolute;
    top: 0;
    left: 100%;
    border-color:#000;
    border-style:solid;
    border-width:1px;
    width:80px;
    height:80px;
    text-align:center;
    display: inline-box;
}

フィドルのリファレンス: http://jsfiddle.net/audetwebdesign/DWe8B/

ノート

(1) テキスト行内にポップアップ ボックスをネストしました。私はそれを回避することができます。
問題は、ポップアップが親の幅を継承するため、幅を指定しない限り、ボックスが非常に狭くなる可能性があることです。

于 2013-03-19T21:43:08.530 に答える