为什么SPECIFIC div元素的属性会扩展到其他单独的div元素？

时间：2016-06-05 05:26:02

标签： html css

我做了一个小练习网站。 我提出了一个令人沮丧的问题。

我做了一个div如下：

<div class="work-process">

        <div class="container" align="center">

            <div class="col-md-12">

                <p class="takeaway"> Learn about our creative & unique work process </p>

            </div>

            <div class="col-md-12 btn-column">

                <a href="aboutus.html">

                    <div class="btn btn-workp">

                        <p class="button-text"> Learn More </p>

                    </div>

                </a>

            </div>

        </div>

    </div>

我设置了这个div的背景图像，但它不仅仅设置了这个小div部分，而且还使前一个div具有相同的背景图像。在移动格式中，前一个div不再共享图像，但是这个div（“工作过程”）确实并且在中间与前一个div重叠。当我在Chrome中检查元素时，“工作流程”似乎跨越了整个页面。这是为什么？

CSS：

h1, h2, h3{
    font-family: 'Raleway', sans-serif;
}
p{
    font-family: 'Raleway', sans-serif;
}
a{
    font-family: 'Raleway', sans-serif;
}
.top-infobar{
    background-color: #1A1C27;
}
.top-infobar p{
    color: grey;
    font-family: 'Arimo', sans-serif;
    padding-right: 2%;
    padding-left: 2%;
    padding-top: 4px;
    margin-top: 2px;
    display: inline-block;
}
.top-infobar p:hover{
    color: white;
}
.navbar{
    margin-bottom: 0;
     border-radius: 0
}
.navbar-default a{
    color: #2164FF;
}
#external_links a{
    font-size: 110%;
}
.icon-bar{
    background-color: white;
}
/* Jumbotron */
.humbotron{
    background-image: url("images/nyc.jpg");
    background-repeat: no-repeat; 
    background-position: 56% 25%;
    background-attachment: fixed;

}
.humbotron h1{
    margin-top: 15%;
    text-transform: uppercase;
    font-size: 500%;
    display:inline-block;
    color: white;
    border: 1px solid white;
    padding-right: 5%;
    padding-left: 5%;
}

.hook p{
    color: white;
    font-size: 150%;
    margin-top: 1%;
}
.hook2 p{
    color: white;
    font-size: 150%;
}
@media screen and (max-width: 480px) {
    .humbotron h1{
        font-size: 350%;
    }

}
.lm-row{
    margin-top: 5%;
    padding-bottom: 5%;

}
.button{
    border: 1px solid #ffffff;
    padding: 10px;
}
.lm-row a{
    text-decoration: none;
    color: #ffffff;
    font-size: 100%;
}
.button:hover{
    background-color: #ffffff;
}
.lm-row a:hover{
    color: black;
}

/* Second page */
.desc-page{
    height:100vh; 
}
.header2{
    margin-top: 2%;
    text-transform: uppercase;
}
.header-underline{
    border-color: #acadad;
    max-width: 50%;
}
#laptop-img-sec{
    margin-top: 5%;
}
.laptopimg img{
    max-width: 100%;
}
.all-descs{
    height: 100%;
}
#images-folder{
    width: 100px;
    float: left;
}
.all-descs:hover #circle{
    background-color: #90C3D4;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
}
.all-descs{
    margin-bottom: 5%;
}
.complimentary-desc h3{
    text-transform: uppercase;
}
/* Work Process advert */
.work-process{
    background-image: url('images/paint.jpg');
    padding-bottom: 5%;
}
.takeaway{
    font-size: 200%;
    padding-top: 5%;
    color: white;
}
.btn-column{
    margin-top: 3%;
}
.btn-workp {
  font-family: Arial;
  color: #ffffff;
  font-size: 15px;
  padding: 10px 20px 0px 20px;
  border: solid #ffffff 1px;
  text-decoration: none;
}
.btn-workp:hover {
  background: #ffffff;
  text-decoration: none;
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
}

所有HTML：

<!DOCTYPE html>
<html>

<!-- Head -->
<head>
    <meta charset="uft-8">
    <meta name="viewport" content="width=device-width">
    <title> Coherent </title>

        <!-- JQuery -->
        <script src="http://code.jquery.com/jquery-latest.min.js"></script> 
        <!-- Bootstrap -->

            <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

        <!-- Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>


        <!-- CSS -->
            <link rel="stylesheet" type="text/css" href="home.css">

        <!-- Raleway font -->
            <link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>

        <script src="js/bootstrap.min.js"></script> 

        <!-- Other font -->

        <link href='https://fonts.googleapis.com/css?family=Arimo' rel='stylesheet' type='text/css'>

</head>
<!-- End of Head -->

<body>
    <div class="top-infobar">

         <p> <span class="glyphicon glyphicon-phone"> </span>(647)-550-3998</p>

         <p> <span class="glyphicon glyphicon-envelope"> </span> info@coherent.ca </p>

    </div>

    <!-- Navigation Bar -->
    <div class="navbar navbar-default">

            <div class="navbar-header">

                <a href="home.html" class="navbar-brand"> Coherent</a>

                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

                <span class="sr-only">Toggle navigation </span>

                <div id="collapse-button">

                    <span class="icon-bar"></span>

                    <span class="icon-bar"></span>

                    <span class="icon-bar"></span>

                </div>

            </div>

            <div class="collapse navbar-collapse">

                <ul id="external_links" class="nav navbar-nav">

                    <li><a href="home.html">Home </a></li>

                    <li><a href="aboutus.html">About Us </a></li>

                    <li><a href="services.html">Services </a></li>

                    <li><a href="contactus.html">Contact Us </a></li>

                </ul>

            </div>

    </div>

    <!-- Homemade Jumbotron -->
    <div class="humbotron col-md-12">

        <div class="container">

            <div class="row">

                <div class="header col-md-12" align="center" id="main_header">

                    <h1> Coherent </h1> 

                </div>


                <div class="hook col-md-12" align="center" id="first_hook">

                    <p> Hello from the other side </p>

                </div>

                <div class="hook2 col-md-12" align="center" id="second_hook">

                    <p> To tell u I'm sorry </p>

                </div>

                <div class="lm-row col-md-12" align="center">

                    <a href="services.html" id="lm-link" class="button">Learn More</a>

                </div>

            </div>

        </div>

    </div>

    <div class="desc-page col-md-12">

        <div class="container">

            <div class="row">

                <div class="header2 col-md-12" align="center">

                    <h2 style="font-size: 300%"> <strong> What you get </strong> with Coherent </h2>
                    <hr class="header-underline">

                </div>

            </div>

        </div>

            <div class="row" id="laptop-img-sec">

                <div class="laptopimg col-md-6">

                    <img src="images/adele.png" align="center">

                </div>

                <div class="img-qualities col-md-6">

                    <div class="row">

                        <div class="all-descs col-md-12">

                            <img id="images-folder" src="images/skilled-team.png">  

                            <div class="complimentary-desc">

                                <h3> A <strong> skilled </strong> and <strong> reliable </strong> team </h3>

                                <p> With Coherent, you get a reliable, professional, and experienced team to tend to your graphic design and social media needs </p>

                            </div>

                        </div>

                    </div>

                    <div class="row">

                        <div class="all-descs col-md-12">

                                <img id="images-folder" src="images/professional-services.png">

                            <div class="complimentary-desc">

                                <h3> <strong> Professional </strong> services </h3>

                                <p> You can be assured a professional job and final finish. Take a seat, and let the experts handle this </p>

                            </div>

                        </div>

                    </div>

                    <div class="row">

                        <div class="all-descs col-md-12">

                            <img id="images-folder" src="images/fast-and-efficient.png">

                            <div class="complimentary-desc">

                                <h3> <strong> Fast </strong> and <strong> Efficient </strong> services </h3>

                                <p> When you have made an order, we ensure that you are our top priority until its finished. </p>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

    </div>

    <div class="work-process">

        <div class="container" align="center">

            <div class="col-md-12">

                <p class="takeaway"> Learn about our creative & unique work process </p>

            </div>

            <div class="col-md-12 btn-column">

                <a href="aboutus.html">

                    <div class="btn btn-workp">

                        <p class="button-text"> Learn More </p>

                    </div>

                </a>

            </div>

        </div>

    </div>


</body>
</html>

1 个答案:

答案 0 :(得分：1)

问题是因为你的其他div是浮动的，因此work-process背景占据了整个页面。

要解决此问题，请禁止div work-process以外的任何浮动元素，在css下面添加：

.work-process{
clear: both;
}
相关问题
最新问题