Как сделать так, чтобы позиция вела себя как блок дисплея? - PullRequest
Новая
       13

Как сделать так, чтобы позиция вела себя как блок дисплея?

0 голосов
/ 17 мая 2019

Я создал раздел.И я хочу, чтобы элементы в этом разделе не влияли на следующий, когда они чувствительны.Как я могу решить эту проблему переполнения?Заранее большое спасибо.

первая ссылка-> https://i.hizliresim.com/XMnYqO.jpg вторая ссылка-> https://i.hizliresim.com/lqozvp.jpg

мой код; 

<!-- Start Interest -->
<section id="interest" class="padding-section">
    <div class="bg-overlay"></div>
    <div class="container">
        <div class="row">
            <div class="col-xl">
                <div class="wrapper-interest">
                    <div class="banner-content text-center">
                        <div class="wrapper-title">
                            <div></div>
                            <div></div>
                            <div></div>
                            <h2 class="d-inline-block ml-4 mr-4">Interests</h2>
                            <div></div>
                            <div></div>
                            <div></div>
                        </div>
                        <p>Lorem ipsum dolor sit amet, dolore magna aliqua.</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="row container wrapper-interest-row mt-4">
            <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6">
                <div class="card rect border-0 custom-border-radius-2">
                    <div class="card-body sub-title text-center">
                        <img src="assets/images/interest_1.png" alt="interest icon">
                        <h5>Photography</h5>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6">
                <div class="card rect border-0 custom-border-radius-2">
                    <div class="card-body sub-title text-center">
                        <img src="assets/images/interest_2.png" alt="interest icon">
                        <h5>Vanlife</h5>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6">
                <div class="card rect border-0 custom-border-radius-3">
                    <div class="card-body sub-title text-center">
                        <img src="assets/images/interest_3.png" alt="interest icon">
                        <h5>Foods</h5>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6">
                <div class="card rect border-0 custom-border-radius-3">
                    <div class="card-body sub-title text-center">
                        <img src="assets/images/interest_4.png" alt="interest icon">
                        <h5>Reading</h5>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- End Interest -->

My CssКод; 

#interest {
    background: url(../../assets/images/bg_interest.jpg);
    position: relative;
    top: 0;
    left: 0;
    height: 360px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

#interest .bg-overlay {
    background: rgba(0, 0, 0, 0.5);
}

.wrapper-interest .banner-content {
    margin-top: 0;
}

.wrapper-interest .wrapper-title {
    margin-top: 0;
}

.wrapper-interest .banner-content h2 {
    font-family: 'K2D', sans-serif;
    font-size: 4.4rem;
    letter-spacing: 1px;
    font-weight: 600;
    line-height: 1.1;
}

.rect {
    box-shadow: 0px 6px 15px 0px rgba(255, 88, 88, .2);
}

.rect-2 {
    box-shadow: 0px 6px 15px 0px rgba(62,67,233,.2);
}

.wrapper-interest-row {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    min-height: auto;
    margin: 0 auto;
}
...