expand-Zusammenbruch Boxen Lassen bewegen / schieben Hauptinhalt nach unten und oben

StackOverflow https://stackoverflow.com/questions/2478750

  •  21-09-2019
  •  | 
  •  

Frage

Ich hatte gerade eine Frage zu Ausrichten von zwei expand-Kollaps-Box und bekam eine Antwort, und es funktionierte aber nicht, dass ich in ein anderes Problem führen.

Als ich erweitern, meine Boxen der Text darunter (der Hauptinhalt) nicht nach unten gedrückt wird, sondern mehr „auf der rechten Seite geschubst“.

Das Problem ist klar, in diesem Code unter: 

<!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>

Hat jemand weiß, wie man „erklären“ meine Boxen zu erweitern, um nach unten drücken und unten dem Text unter?

Danke Mestika

War es hilfreich?

Lösung

In clear: left zum Hauptinhalt, etwa so:

CSS 

#content {
    clear: left;
}

HTML 

<div id="content">
  <p>
  THIS IS MY CONTENT TEXT UNDER THE EXPAND COLLAPSE BOXES:
  ...
  </p>
</div>
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top