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對齊（展開 - 摺疊）框彼此相鄰

回答

相關問題