CSS：帮助将div对齐（展开 - 折叠）框彼此相邻

我在对齐两个彼此相邻的div框时遇到了一些麻烦。或者更准确地说，我已经将我的两个“头”框相互对齐，但我的问题是我将它们用作展开折叠容器，并且这些框不能正确对齐。CSS：帮助将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>

感谢 Mestika

来源

2010-03-19 Mestika

这为我工作在Firefox 3.7A。有两件事情发生了变化：添加了文档类型并将每列包装在一个包装中。包装类可能会被命名为更多的语义，这取决于你。

<!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-19 15:15:18

铬也批准此更改。 – msw 2010-03-19 15:19:58

神奇，它的工作原理。非常感谢：-） – Mestika 2010-03-19 15:33:56

CSS：帮助将div对齐（展开 - 折叠）框彼此相邻

回答

相关问题