Question

我点击时显示的隐藏（切换）div会根据下面的div创建一个边距。我试着给隐藏的div的所有内容留下一个负面的边缘，但它似乎有点笨拙，我相信有一个更优雅的解决方案。

有什么建议吗？

<html>
    <head>
        <script type="text/javascript">
            function toggle_visibility(id) {
                var e = document.getElementById(id);
                if(e.style.display == 'block')
                    e.style.display = 'none';
                else
                    e.style.display = 'block';
            }
        </script>

        <style>
            body {
                margin:0; 
                width:100%; 
                height:100%
            }
            #first {
                z-index:1; 
                position:relative; 
                display:block;width:25%; 
                height:10%; 
                background-color:#F00; 
                float: left
            }
            #second {
                z-index:1;
                position:relative; 
                display:block;
                width:25%; 
                height:10%; 
                background-color:#FF0; 
                float: left
            }
            #first_hidden {
                display:none;
                z-index:10;
                position:relative; 
                width:100%;
                height:100%;
                background-color:#0F0
            }
            #second_hidden {
                display:none;
                z-index:10;
                position:relative; 
                width:100%; 
                height:100%; 
                background-color:#F0F;
            }
        </style>
    </head>
    <body>
        <div id="first">
            <a href="#" onclick="toggle_visibility('first_hidden');toggle_visibility('first_hidden_none');">First</a>
        </div>
        <div id="first_hidden"> 
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempus non massa nec porta. Sed mollis aliquam dui at egestas.</p>
            <a href="#"onclick="toggle_visibility('first_hidden');toggle_visibility('first_hidden_none');"><-Back1</a>
        </div>

        <div id="second">
            <a href="#" onclick="toggle_visibility('second_hidden');toggle_visibility('second_hidden_none');">Second</a>
        </div>
        <div id="second_hidden"> 
            <p>Nulla id mauris volutpat, elementum urna suscipit, tempor diam. Sed semper metus purus, vel luctus nulla rutrum eu. Nulla id.</p>
            <a href="#" onclick="toggle_visibility('second_hidden');toggle_visibility('second_hidden_none');"><-Back2</a>
        </div>
    </body>
</html>

Answer 1

您必须保留<div>的{{1}}默认margin:1em 0;内<p>或padding border，或重置{{ 1 {} <div>。测试一下：

margin:0;

http://liveweave.com/B8D32x

z-index top div根据下面的div创建一个保证金

1 个答案: