اترك صناديق التوسع تتحرك / دفع المحتوى الرئيسي لأسفل إلى الأسفل

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

  •  21-09-2019
  •  | 
  •  

سؤال

لقد كان لدي سؤال حول محاذاة صناديق اثنين من التوسيع وحصلت على إجابة وعملت ولكن لم أواجه مشكلة أخرى.

عندما أتوسع ، لا يتم دفع الصناديق الخاصة بي أسفله (المحتوى الرئيسي) إلى أسفل ولكن أكثر "يدفع إلى اليمين".

المشكلة واضحة في هذا الرمز تحتها:

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

هل يعرف أي شخص كيفية "شرح" صناديق التوسيع الخاصة بي للدفع لأسفل وأسفل النص تحتها؟

شكرا ميستيكا

هل كانت مفيدة؟

المحلول

يضيف clear: left إلى المحتوى الرئيسي ، مثل ذلك:

CSS

#content {
    clear: left;
}

لغة البرمجة

<div id="content">
  <p>
  THIS IS MY CONTENT TEXT UNDER THE EXPAND COLLAPSE BOXES:
  ...
  </p>
</div>
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top