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），以便内框的右下角相对于链接的左上角定位。这可能吗？

目标浏览器是 IE8+、Firefox、Chrome、Opera、Safari。

链接始终具有相同的高度和宽度。

4

2 回答 2

3

到目前为止，我能想到的唯一解决方案是：

http://jsfiddle.net/fmVz6/ - 这需要在“外盒”上定义高度和宽度，而不是内盒（内盒也必须绝对定位）。

目前正在制作第二个...

http://jsfiddle.net/fmVz6/1/ - 这个不需要指定高度或宽度，它只需要在父 div 内的东西（例如空格）来查看效果，否则背景不会出现。

好的，让它出现在链接的左上角，http://jsfiddle.net/H5G8r/1/（需要对您的 HTML 进行一些重新排列）。

这个不需要定义宽度，并且不会将单词分成多行：http: //jsfiddle.net/H5G8r/2/

随你挑:-)

于 2012-09-24T17:28:10.160 回答
2

你有正确的想法，但倒退。父元素需要position: relative和内部元素，因为内部元素相对于其父position: absolute元素是绝对定位的（从技术上讲，它的. 在父元素上指定使其成为其所有子元素的一部分）。offsetParentposition: relativeoffsetParent

下一步：要将父元素的左上角与绝对定位的子元素的右下角对齐，请在子元素right: 100%; bottom: 100%的 CSS 中指定。这使子 <100% of parent's width> 远离父级的右边缘，而 <100% of parent's height> 远离底部。

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 回答