0

我在对齐两个相邻的 div 框时遇到了一些麻烦；。或者更准确地说，我已经将我的两个“头”框彼此对齐，但我的问题是我将它们用作展开-折叠容器并且这些框无法正确对齐。

我在下面发布了整个代码，如果有人能解决这个问题，我将不胜感激，这可能并不难。另一个问题是，当我扩展隐藏区域时，两个框“重置”并再次相互站立。

<html>
<head>

<!-- Panel Slider for Contact -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>

 <!-- Expand Collapse -->
    <script type="text/javascript">$(function(){
$("#mostrar1").click(function(event) {event.preventDefault();
                $("#caja1").slideToggle();
                });

$("#caja1 a").click(function(event) {event.preventDefault();
                $("#caja1").slideUp();
                });
$("#mostrar2").click(function(event) {event.preventDefault();
                $("#caja2").slideToggle();
                });

$("#caja2 a").click(function(event) {event.preventDefault();
                $("#caja2").slideUp();
                });
}); </script> 

<style type="text/css">
.slide-out-div {
       padding: 20px;
       width: 250px;
       background: #031F2F;
       margin: 0px;

    }

            #caja1 {
            width:30%;
            display: none;
            padding:5px;
            border:2px solid #FFFFFF;
            background-color:#99a8ff;
            }

            #mostrar1{
            display:block;
            width:30%;
            padding:5px;
            border:2px solid #FFFFFF;
            background-color:#0C415F;
            float: left;
            color: #FFFFFF;
            }           

            #caja2 {
            width:30%;
            display: none;
            padding:5px;
            border:2px solid #FFFFFF;
            background-color:#99a8ff;
            }

            #mostrar2{
            display:block;
            width:30%;
            padding:5px;
            border:2px solid #FFFFFF;
            background-color:#0C415F;
            float: left;
            color: #FFFFFF;
            }           
            }   

</style>
</head>
<body>

        <a href="#" id="mostrar1">Private</a><div style="display: none;" id="caja1"><a href="#" class="close">[x]</a><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p></div><a href="#" id="mostrar2">Erhverv</a><div style="display: none;" id="caja2"><a href="#" class="close">[x]</a><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p></div>        
</body>
</html>

谢谢梅斯蒂卡

4

1 回答 1

2

这在 Firefox 3.7a 上对我有用。有两件事发生了变化：添加了一个 doctype 并将每一列包装在一个包装器中。包装类可能会被命名为更语义化的东西，这取决于你。

<!DOCTYPE html>
<html>
<head>

<!-- Panel Slider for Contact -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>

 <!-- Expand Collapse -->
    <script type="text/javascript">$(function(){
$("#mostrar1").click(function(event) {event.preventDefault();
                $("#caja1").slideToggle();
                });

$("#caja1 a").click(function(event) {event.preventDefault();
                $("#caja1").slideUp();
                });
$("#mostrar2").click(function(event) {event.preventDefault();
                $("#caja2").slideToggle();
                });

$("#caja2 a").click(function(event) {event.preventDefault();
                $("#caja2").slideUp();
                });
}); </script>

<style type="text/css">
.wrapper {
    width: 30%;
    float: left;
}
.slide-out-div {
       padding: 20px;
       width: 250px;
       background: #031F2F;
       margin: 0px;
    }

            #caja1 {
            display: none;
            padding:5px;
            border:2px solid #FFFFFF;
            background-color:#99a8ff;
            }

            #mostrar1{
            display:block;
            padding:5px;
            border:2px solid #FFFFFF;
            background-color:#0C415F;
            color: #FFFFFF;
            }

            #caja2 {
            display: none;
            padding:5px;
            border:2px solid #FFFFFF;
            background-color:#99a8ff;
            }

            #mostrar2{
            display:block;
            padding:5px;
            border:2px solid #FFFFFF;
            background-color:#0C415F;
            color: #FFFFFF;
            }

</style>
</head>

<body>

<div class="wrapper">
<a href="#" id="mostrar1">Private</a><div style="display: none;" id="caja1"><a href="#" class="close">[x]</a><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p></div>
</div>
<div class="wrapper">
<a href="#" id="mostrar2">Erhverv</a><div style="display: none;" id="caja2"><a href="#" class="close">[x]</a><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p></div>
</div>
</body>
</html>
于 2010-03-19T15:15:18.930 回答