如何在下面的内容样式摘要

时间:2012-11-26 17:59:27

标签: html css

我在summary元素中有一个details元素,现在想要在summary内容下显示details的内容。

似乎display属性仅适用于内容,不包含summary。有没有办法改变summary的位置?

<html>
    <head>
        <style>
            details
            {
                display: -webkit-box;
                -webkit-box-orient: vertical;
            }

            details > summary
            {
                -webkit-box-ordinal-group: 2;
            }

            details > div
            {
                -webkit-box-ordinal-group: 1;
            }
        </style>
    </head>
    <body>
        <details open>
            <summary>Get Me Down!</summary>
            <div>Rise Up</div>
        </details>
    </body>
</html>

1 个答案:

答案 0 :(得分:2)

我有一个非常hacky的解决方案。此外,只有当你知道两个元素的大小时,它才会起作用。但我认为这是一个开始。

details div { position: relative; bottom: 20px;}
details summary { position: relative; top: 20px; }

http://jsfiddle.net/PUknK/10/