Question

在展开div之前，div是相互分离的。当我按下“SCOPRIDIPIÙ”按钮展开div时，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

将margin-bottom: 20px添加到您在HTML中<br/>的css

＆＃13;

$(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();
    });
});

＆＃13;

#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
}

＆＃13;

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

＆＃13;

Answer 3

将边距放入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;
}

JQuery扩展后如何避免div互相攻击

3 个答案: