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

이것은 파이어 폭스 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-19 15:15:18

크롬도이 변경을 승인합니다. – msw

환상적입니다. 정말 고마워 :-) – Mestika

CSS : 서로 옆에있는 div (펼치기 - 접기) 상자 정렬에 대한 도움말

답변

관련 문제