cajas de dejar que ampliar colapso mueven / push contenido principal hacia arriba y abajo

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

  •  21-09-2019
  •  | 
  •  

Pregunta

Yo sólo tenía una pregunta sobre la alineación de dos cajas de ampliar colapso y obtuve una respuesta y funcionó, pero no me he encontrado con otro problema.

Cuando amplío, mis cajas de texto debajo de ella (el contenido principal) no es empujado hacia abajo, pero más “dio un codazo a la derecha”.

El problema es claro en este código debajo: 

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

¿Alguien sabe cómo "explicar" mis expandir cajas para empujar hacia abajo y hacia abajo por debajo del texto?

Gracias Mestika

¿Fue útil?

Solución

Añadir clear: left al contenido principal, así:

CSS 

#content {
    clear: left;
}

HTML 

<div id="content">
  <p>
  THIS IS MY CONTENT TEXT UNDER THE EXPAND COLLAPSE BOXES:
  ...
  </p>
</div>
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top