Question

我在这里遇到一些问题。当我缩小我的屏幕时，颜色＆＃34;格雷＆＃34;由于某种原因，我遇到了我的白色div。上面的div是我的jumbotron，所以我不确定为什么会这样。

我的网站在下面供您查看，看看在计算机上减少时会发生什么。

hustlebussellunlimited.com

以下是我的一些CSS代码，如果您需要更多代码，请告诉我。

.jumbotron{
    background: linear-gradient(
            rgba(0, 0, 0, 0.1),
            rgba(0, 0, 0, 0.2)
    ), url(main-banner.jpg);
    background-size: cover;
    color: #ffffff;
    padding: 0;

}
.jumbotron .intro{
    background: rgba(0, 0, 0,0.1);
    padding-top: 120px;
    padding-bottom: 40px;
    min-height: 400px;
}

.jumbotron .intro .row-top div.ccont{

}
.row-bottom{
    margin-top: 20px;
    margin-bottom: 20px;
}

.jumbotron div.ccont{
    background: #fff;
    min-height: 150px;
}
.jumbotron .row-top div.ccont{
    -webkit-box-shadow: 0px 1px 2px rgba(100, 100, 100, 0.75);
    -moz-box-shadow:    0px 1px 2px rgba(100, 100, 100, 0.75);
    box-shadow:         0px 1px 2px rgba(100, 100, 100, 0.75);

}

.jumbotron .row-bottom div.ccont{
    -webkit-box-shadow: -1px -1px 2px rgba(100, 100, 100, 0.75);
    -moz-box-shadow:    -1px -1px 2px rgba(100, 100, 100, 0.75);
    box-shadow:         -1px -1px 2px rgba(100, 100, 100, 0.75);

}

.jumbotron p{
    padding: 20px 0;
}

.jumbotron .media{
    margin: 50px 0;
}
.jumbotron .media-body h1{
    margin-top: 100px;
}

section.slider{
    color: #ffffff;
    background: #696969;
    margin: 40px 0;
    padding: 40px 0;
}

section.slider h2{
    margin-bottom: 20px;
}

section.slider .col-md-8{
    padding-left: 30px;
}

这是我的HTML代码

<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron" id="home">
    <div class="intro">
        <div class="container">

            <div class="row">
                <h1 class="text-center"><span style="font-size:1.9em;">W</span>eb<span style="font-size:1.9em;">I</span>nsight</h1>

                <p class="text-center">A Subsidiary of HustleBussell</p><br/>
            </div>
            <div class="row triangles">
                <div class="up-triangle animated fadeInUp">
                    <div class="info">

                        Search Engine Optimization
                    </div>
                </div>
                <div class="down-triangle animated fadeInDown">
                    <div class="info">

                        Web Development<br/>

                    </div>
                </div>
                <div class="up-triangle animated fadeInUp">
                    <div class="info">


                        Marketing
                    </div>
                </div>
                <div class="down-triangle animated fadeInDown">
                    <div class="info">

                        Systems Security<br/>

                    </div>
                </div>

                <div class="down-triangle animated fadeInDown visible-sm">
                    <div class="info">

                        Mobile App Development<br/>

                    </div>
                </div>

                <div class="up-triangle animated fadeInUp">
                    <div class="info">


                        Consulting
                    </div>
                </div>
                <div class="down-triangle animated fadeInDown">
                    <div class="info">

                        Branding<br/>

                    </div>
                </div>
                <div class="up-triangle animated fadeInUp">
                    <div class="info">


                        Growth Hacking
                    </div>
                </div>


            </div>

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

<section id="services">
<div class="container">
    <!-- Example row of columns -->
    <div class="row features inner-page">
        <div class="col-md-12 text-center">
            <h2>Amplify your Reach, Achieve Massive Results</h2>

            <p style="font-size:20px;">Many people believe they can build their brand and attract new clients by being active online only and engaging in marketing practices. This is only
                partially true. In order to take your brand to the next level, you have to start with unrealistic thinking. Unrealistic meaning that we execute beyond what most people believe is possible. This thinking involves the client being at the starting point of it all. Ground Zero. This is what we call "Client Zero Thinking". WebInsight
                takes you to the next level by engaging in "BackYard Marketing", generating sales leads and boosting revenue utilizing overlooked resources.</p>
        </div>
    </div>



</div>
</section>

<section class="slider" id="features">
    <div class="container">
        <div class="inner-page">
            <h2 class="text-center">About Us</h2>

            <p style="font-size:20px;" class="text-center">WebInsight is a creative marketing and technology company based in Chicago, Illinois. Our mission statement "Provide so much value
            that the cost paid for our services is nothing compared to the benefit" is what we live by. We honor our clients and therefore we provide the best solutions
            and services for your problems. Whether you're a company just starting or an already established business, we offer results oriented solutions to help you become a market leader.</p>
        </div>



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

Answer 1

在小提琴中我无法模拟问题，但我进入并检查了您的网站。问题是具有该灰色背景的元素.info分别包含三角形。

当您调整窗口大小时，三角形会出现两行，因此visibility:hidden的高度会变大并与下一个元素（白色）重叠。你已经隐藏了(max-width: 1152px)这里的visibility:hidden三角形，display:none只隐藏了元素，但它们仍然占据了空间。你应该使用@media (max-width: 1152px) .up-triangle, .down-triangle { /* visibility: hidden; */ display: none!important; }所以元素是隐藏的，它们不占用空间

代码：

!important

添加了.visible-sm { display: block !important;}，因为你的css中也有这个：!important并且它覆盖了代码。我建议你只有在必须的时候才使用visibility。

阅读有关display和do之间差异的更多信息，请参阅此处what-is-the-difference-between-visibilityhidden-and-displaynone

Div减少时重叠另一个Div

1 个答案: