如何在jQuery擴展後避免div互相碰撞

Question

在展開div之前，div彼此分開。 當我按下「SCOPRI DIPIÙ」按鈕來展開一個div時，div會彼此碰撞，但我不想讓div做到這一點。

我該如何解決這個問題？

情況是這樣的擴展格前：

這已經按下了按鈕的情況：

$(document).ready(function() { 
 
    var $p = $('#more'); 
 
    $("#show").click(function() { 
 
     $p.css('display', 'block'); 
 
     $("#show").hide(); 
 
     $("#hide").show(); 
 
    }); 
 

 
    $("#hide").click(function() { 
 
     $p.css('display', 'none'); 
 
     $("#show").show(); 
 
     $("#hide").hide(); 
 
    }); 
 

 
    var $p1 = $('#more1'); 
 
    $('#show1').click(function() { 
 
     $p1.css('display', 'block'); 
 
     $("#show1").hide(); 
 
     $("#hide1").show(); 
 
    }); 
 

 
    $("#hide1").click(function() { 
 
     $p1.css('display', 'none'); 
 
     $("#show1").show(); 
 
     $("#hide1").hide(); 
 
    }); 
 
});

#child-left { 
 
    float: left; 
 
    text-align: left; 
 
    width: 1000px; 
 
    background: #a51c30; 
 
    /*height: 100px;*/ 
 
    padding: 15px; 
 
    /*position: relative;*/ 
 
    height: 100%; 
 
    position: relative; 
 
    margin: 0 auto; 
 
    border-radius: 15px; 
 
} 
 

 
#child-right { 
 
    float: right; 
 
    text-align: right; 
 
    width: 1000px; 
 
    background: #bbbbbb; 
 
    /*height: 100px;*/ 
 
    padding: 15px; 
 
    /*position: relative;*/ 
 
    margin: 0 auto; 
 
    border-radius: 15px; 
 
    height: 100%; 
 
    position: relative; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="row"> 
 
     <div id="child-left"> 
 
      <i class="fa fa-gears" style="font-size:36px; color: #bbbbbb; margin-left: 15px;"></i> 
 
      <span style="margin-left: 10px; color: white;">BACHECA CHALLENGES</span> 
 
      <br> 
 
      <p class="style">Pubblicate le vostre challenge su una bacheca accessibile a tutti i potenziali solvers e in ogni momento potrete sapere quanti utenti stanno lavorando per trovare una soluzione ai vostri problemi. Al termine della challenge verrete contattati 
 
       dal nostro staff che si preoccuperà di mostrarvi tutte le soluzioni trovate.</p> 
 
      <button id="show" class="btn btn-primary">Scopri di più</button> 
 
      <p id="more" class="style" style="display: none;"> 
 
       <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis nec elit quis convallis. Sed placerat metus elit, vel gravida magna cursus sit amet. In eleifend, sem eu blandit vulputate, diam lectus tincidunt felis, 
 
       vel posuere diam dui eget elit. Nulla tempus quis velit a ultricies. Aliquam ornare a dolor quis laoreet. Quisque et mi sapien. Pellentesque consequat neque ante, nec accumsan dolor lacinia id. Aliquam ultrices lectus gravida nibh 
 
       sollicitudin, ac sagittis dui ullamcorper. Nulla in pellentesque eros. Quisque euismod purus vel augue tincidunt, sit amet mollis arcu sollicitudin. Nullam vitae quam risus. Nam ex turpis, posuere a aliquam ac, commodo eu magna. Aliquam 
 
       ipsum mauris, accumsan eget mauris id, hendrerit faucibus dui. Praesent quis est non metus sagittis posuere ut et nisl. 
 
      </p> 
 
      <button id="hide" class="btn btn-primary" style="display: none;">Nascondi</button> 
 
     </div> 
 

 
     <br><br><br><br><br><br><br><br><br><br><br><br><br> 
 

 
     <div id="child-right"> 
 
      <i class="fa fa-pencil-square-o" style="font-size:36px; color: #a51c30; margin-left: 15px;"></i> 
 
      <span style="margin-left: 10px; color: white;">BACHECA QUESTIONS</span> 
 
      <br> 
 
      <p class="style" style="text-align: right;"> 
 
       Make It Happen offre un servizio di consulenza rapida ed economica: postate domande di qualunque natura e avrete <br> risposte mirate in tempi molto brevi. 
 
      </p> 
 
      <button id="show1" class="btn bottom_company btn-primary">Scopri di più</button> 
 
      <p id="more1" class="style" style="display: none;"> 
 
       <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis nec elit quis convallis. Sed placerat metus elit, vel gravida magna cursus sit amet. In eleifend, sem eu blandit vulputate, diam lectus tincidunt felis, 
 
       vel posuere diam dui eget elit. Nulla tempus quis velit a ultricies. Aliquam ornare a dolor quis laoreet. Quisque et mi sapien. Pellentesque consequat neque ante, nec accumsan dolor lacinia id. Aliquam ultrices lectus gravida nibh 
 
       sollicitudin, ac sagittis dui ullamcorper. Nulla in pellentesque eros. Quisque euismod purus vel augue tincidunt, sit amet mollis arcu sollicitudin. Nullam vitae quam risus. Nam ex turpis, posuere a aliquam ac, commodo eu magna. Aliquam 
 
       ipsum mauris, accumsan eget mauris id, hendrerit faucibus dui. Praesent quis est non metus sagittis posuere ut et nisl. 
 
      </p> 
 

 
      <button id="hide1" class="btn bottom_company btn-primary" style="display: none;">Nascondi</button> 
 

 
     </div> 
 
    </div> 
 
</div>

Answer 1

可以CSS屬性margin-bottom: 55px!important;增加#child-left和#child-right。檢查fiddle。

Answer 2

放利潤率在CSS

#child-left { 
    float: left; 
    text-align: left; 
    width: 1000px; 
    background: #a51c30; 
    /*height: 100px;*/ 
    padding: 15px; 
    /*position: relative;*/ 
    height: 100%; 
    position: relative; 
    margin-top: 20px; 
    margin-bottom : 20px; 
    border-radius: 15px; 
} 

#child-right { 
    float: right; 
    text-align: right; 
    width: 1000px; 
    background: #bbbbbb; 
    /*height: 100px;*/ 
    padding: 15px; 
    /*position: relative;*/ 
    margin-top: 20px; 
    margin-bottom : 20px; 
    border-radius: 15px; 
    height: 100%; 
    position: relative; 
} 

Answer 3

添加margin-bottom: 20px到你的CSS在HTML insted的的<br/>

$(document).ready(function() { 
 
    var $p = $('#more'); 
 
    $("#show").click(function() { 
 
     $p.css('display', 'block'); 
 
     $("#show").hide(); 
 
     $("#hide").show(); 
 
    }); 
 

 
    $("#hide").click(function() { 
 
     $p.css('display', 'none'); 
 
     $("#show").show(); 
 
     $("#hide").hide(); 
 
    }); 
 

 
    var $p1 = $('#more1'); 
 
    $('#show1').click(function() { 
 
     $p1.css('display', 'block'); 
 
     $("#show1").hide(); 
 
     $("#hide1").show(); 
 
    }); 
 

 
    $("#hide1").click(function() { 
 
     $p1.css('display', 'none'); 
 
     $("#show1").show(); 
 
     $("#hide1").hide(); 
 
    }); 
 
});

#child-left { 
 

 
    float: left; 
 
    text-align: left; 
 
    width: 1000px; 
 
    background: #a51c30; 
 
    /*height: 100px;*/ 
 
    padding: 15px; 
 
    /*position: relative;*/ 
 
    height: 100%; 
 
    position: relative; 
 
    margin: 0 auto; 
 
    border-radius: 15px; 
 
    margin-bottom: 20px 
 
} 
 

 
#child-right { 
 
    float: right; 
 
    text-align: right; 
 
    width: 1000px; 
 
    background: #bbbbbb; 
 
    /*height: 100px;*/ 
 
    padding: 15px; 
 
    /*position: relative;*/ 
 
    margin: 0 auto; 
 
    border-radius: 15px; 
 
    height: 100%; 
 
    position: relative; 
 
    margin-bottom: 20px 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="row"> 
 
     <div id="child-left"> 
 
      <i class="fa fa-gears" style="font-size:36px; color: #bbbbbb; margin-left: 15px;"></i> 
 
      <span style="margin-left: 10px; color: white;">BACHECA CHALLENGES</span> 
 
      <br> 
 
      <p class="style">Pubblicate le vostre challenge su una bacheca accessibile a tutti i potenziali solvers e in ogni momento potrete sapere quanti utenti stanno lavorando per trovare una soluzione ai vostri problemi. Al termine della challenge verrete contattati 
 
       dal nostro staff che si preoccuperà di mostrarvi tutte le soluzioni trovate.</p> 
 
      <button id="show" class="btn btn-primary">Scopri di più</button> 
 
      <p id="more" class="style" style="display: none;"> 
 
       <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis nec elit quis convallis. Sed placerat metus elit, vel gravida magna cursus sit amet. In eleifend, sem eu blandit vulputate, diam lectus tincidunt felis, 
 
       vel posuere diam dui eget elit. Nulla tempus quis velit a ultricies. Aliquam ornare a dolor quis laoreet. Quisque et mi sapien. Pellentesque consequat neque ante, nec accumsan dolor lacinia id. Aliquam ultrices lectus gravida nibh 
 
       sollicitudin, ac sagittis dui ullamcorper. Nulla in pellentesque eros. Quisque euismod purus vel augue tincidunt, sit amet mollis arcu sollicitudin. Nullam vitae quam risus. Nam ex turpis, posuere a aliquam ac, commodo eu magna. Aliquam 
 
       ipsum mauris, accumsan eget mauris id, hendrerit faucibus dui. Praesent quis est non metus sagittis posuere ut et nisl. 
 
      </p> 
 
      <button id="hide" class="btn btn-primary" style="display: none;">Nascondi</button> 
 
     </div> 
 

 

 

 
     <div id="child-right"> 
 
      <i class="fa fa-pencil-square-o" style="font-size:36px; color: #a51c30; margin-left: 15px;"></i> 
 
      <span style="margin-left: 10px; color: white;">BACHECA QUESTIONS</span> 
 
      <br> 
 
      <p class="style" style="text-align: right;"> 
 
       Make It Happen offre un servizio di consulenza rapida ed economica: postate domande di qualunque natura e avrete <br> risposte mirate in tempi molto brevi. 
 
      </p> 
 
      <button id="show1" class="btn bottom_company btn-primary">Scopri di più</button> 
 
      <p id="more1" class="style" style="display: none;"> 
 
       <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis nec elit quis convallis. Sed placerat metus elit, vel gravida magna cursus sit amet. In eleifend, sem eu blandit vulputate, diam lectus tincidunt felis, 
 
       vel posuere diam dui eget elit. Nulla tempus quis velit a ultricies. Aliquam ornare a dolor quis laoreet. Quisque et mi sapien. Pellentesque consequat neque ante, nec accumsan dolor lacinia id. Aliquam ultrices lectus gravida nibh 
 
       sollicitudin, ac sagittis dui ullamcorper. Nulla in pellentesque eros. Quisque euismod purus vel augue tincidunt, sit amet mollis arcu sollicitudin. Nullam vitae quam risus. Nam ex turpis, posuere a aliquam ac, commodo eu magna. Aliquam 
 
       ipsum mauris, accumsan eget mauris id, hendrerit faucibus dui. Praesent quis est non metus sagittis posuere ut et nisl. 
 
      </p> 
 

 
      <button id="hide1" class="btn bottom_company btn-primary" style="display: none;">Nascondi</button> 
 

 
     </div> 
 
    </div> 
 
</div>