Позвольте окнам «Развернуть-Свернуть» переместить / толкнуть основной контент вниз и вверх - PullRequest
Новая
       10

Позвольте окнам «Развернуть-Свернуть» переместить / толкнуть основной контент вниз и вверх

0 голосов
/ 19 марта 2010

У меня только что был вопрос о выравнивании двух блоков развернуть-свернуть и я получил ответ, и это сработало, но я не столкнулся с другой проблемой.

Когда я раскрываю, текст в ящиках под ним (основное содержание) не сдвигается вниз, а больше «подталкивается вправо».

Проблема ясна в следующем коде: 

<!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;
}
            #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><br>
<p>THIS IS MY CONTENT TEXT UNDER THE EXPAND COLLAPSE BOXSES: <br>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>
</body>
</html>

Кто-нибудь знает, как "объяснить" мои поля расширения, чтобы толкать текст внизу и внизу?

Спасибо Mestika

1 Ответ

1 голос
/ 19 марта 2010

Добавить clear: left к основному контенту, вот так:

CSS 

#content {
    clear: left;
}

HTML 

<div id="content">
  <p>
  THIS IS MY CONTENT TEXT UNDER THE EXPAND COLLAPSE BOXES:
  ...
  </p>
</div>
...