1

フローティング要素の構造は次のとおりです。

<a>The_button</a>
<div style="position:absolute">
    <div style="position:relative" class="inner-box">
       Content
       Content
       Content
       Content
       Content
    </div>
</div>

複数のインナーボックスコントロールのコンテンツの長さは可変であるため、インナーボックスの高さは可変です。CSSクラス.inner-box（JavaScriptなし）を定義して、 inner-boxの右下隅がリンクの左上隅に対して配置されるようにします。これは可能ですか？

ターゲットブラウザは、IE8 +、Firefox、Chrome、Opera、Safariです。

リンクの高さと幅は常に同じです。

4

2 に答える 2

3

The only solutions I could come up with so far are:

http://jsfiddle.net/fmVz6/ - this requires a height and width to be defined on the "outer-box", not the inner-box (the inner must be absolutely positioned too).

Working on a second one at the moment ...

http://jsfiddle.net/fmVz6/1/ - this one does not require a height or width specified, it simply needs something inside the parent div (e.g. a space) to see the effect, otherwise the background doesn't appear.

Okay, to have it appear top-left of the link, http://jsfiddle.net/H5G8r/1/ (Requires some rearrangement of your HTML).

This one requires no width to be defined, and doesn't break the words onto multiple lines: http://jsfiddle.net/H5G8r/2/

Take your pick :-)

于 2012-09-24T17:28:10.160 に答える
2

あなたは正しい考えを持っていますが、後ろ向きです。親要素にはposition: relative、および内部要素が必要です。これは、内部要素がその親に対してposition: absolute絶対的に配置されるためです(技術的には、その.親で指定すると、そのすべての子要素の になります)。offsetParentposition: relativeoffsetParent

次: 親要素の左上隅を、絶対配置された子の右下隅に揃えるにはright: 100%; bottom: 100%、子の CSS で指定します。これにより、子が親の右端から <親の幅の 100%> 離され、下から <親の高さの 100%> 離されます。

HTML

<div class=outer-box>
    The Button
    <div class=inner-box>
    </div>
</div>​

CSS

.outer-box {
    position: relative;
}

.inner-box {
    position: absolute;
    /* align bottom-right with offsetParent's top-left */
    bottom: 100%;
    right: 100%;
    width: 100px; /* fixed width, else contents will shrink */
}

また、jsFiddle で: http://jsfiddle.net/ryanartecona/g344W/2/

それらを揃えたら、別のボックスを の中に入れて、ボタンの上を一定距離スライドさせるなど、位置を調整することができます.inner-box。position: relative

于 2012-09-24T18:24:04.167 に答える