Question

所以，我有很多按钮可以扩展div，下面有一些内容。我想将它们放在一个顺序中，以便扩展的内容就在扩展它的按钮之后。这是因为我希望标签顺序为：

选项卡到按钮并单击
标签通过展开的内容
标签到下一个按钮或标签到

为了达到这个目的，我已经将扩展内容定位为绝对的位置。到现在为止还挺好。现在的问题是扩展容器之后的内容不会被推下来。

请参阅此处的页面和代码：http://niklasholmberg.se/temp/tab1.html

我的第一个解决方案是测量扩展div的高度，并将其作为填充添加到应该按下的内容之前的容器中。

请参阅此处的页面和代码：http://niklasholmberg.se/temp/tab2.html

我不太喜欢这个解决方案，并且想要一些不需要编写脚本的东西来正确布局。

我能否以某种方式使得带有类组的div也“包装”绝对定位的容器？
我能以某种方式将扩展的div放置在另一种不使用绝对位置但达到相同结果的方式吗？
或许某人对此案有完整的其他解决方案。

由于

Answer 1

好的，

你可以使用相对于扩展div的位置，即本例中的文章。

<article id="content1" class="expandarticle">
    <h1>Content 1</h1>

    <a href="test">aa</a>
    <button>bb</button>
    <input type="text">
  </article>

你的css应该是

.expandarticle {
    background: none repeat scroll 0 0 #ccc;
    display: table;
    left: 0;
    padding: 10px;
    position: relative;
    right: 0;
}

确保内容最终低于绝对定位元素

1 个答案: