Question

首先，我对Web开发和引导程序非常陌生。

我正在尝试让页面响应，但是当调整浏览器大小时，div会重叠。

这是缩小和放大页面的图片---（http://imgur.com/a/sPlsf）

正如您所看到的，＆＃34;主要内容＆＃34; 是顶级div，底部白色div是＆＃34;内容＆＃34;

前3个图片（顶级配置文件）和底部2个图片（底部配置单元）也在一个单独的div中。当缩小时，这些照片超出了它的位置div。

有人可以解释一下这个问题。

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>S.H.I.E.L.D</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom -->
    <link rel="stylesheet" type="text/css" href="css/main.css">

  </head>
  <body>

    <div class="nav container">
    </div>

    <div class="main-content container">
        <div class="top-hive row">
            <img src="images/hive1.png">
            <img src="images/hive2.png">
            <img src="images/hive3.png">
        </div>

        <div class="bottom-hive row">
            <img src="images/hive4.png">
            <img src="images/hive5.png">
        </div>

    </div>

    <div class="content container">

    </div>

    <div class="footer container">
        <h5>Copyright (2015)</h5>
    </div>





    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

CSS

body {
    background: url(../images/BG_01.png) repeat fixed top center;
    background-size: 100% auto;
}
/*NAV*/
.nav {
    background: url(../images/header_01.png);
    background-position: center;
    height: 417px;
    width: 100%;
    position: relative;
    z-index:2;
}
/*MAIN CONTENT*/
.main-content {
    background: url(../images/CBG_03.png) no-repeat;
    height: 684px;
    background-position: center;
    max-width: 100%;
    text-align: center;
    margin-top: -215px;
    position: relative;
    z-index:1;
}
.top-hive {
    margin-top: 106px;
}
.top-hive img {
    padding: 5px;
}
.bottom-hive {
    margin-top: -60px;
}
.bottom-hive img {
    padding: 5px;
}

/*CONTENT*/
.content {
    background: url(../images/CBG2_03.png) no-repeat;
    height: 621px;
    background-position: center;
    width: 100%;
    text-align: center;
    margin-top: -12px;
}
.text h3 {
    text-transform: uppercase;
    font-size: 2.1em;
}
.text p {
    font-size: 1em;
}
.footer {
    background: #050719 url(../images/footer_02.png)repeat;
    height: 178px;
    width: 100%;
    text-align: center;
    background-position: center;
}

/*FOOTER*/
.footer h5 {
    color: #58a7d9;
    margin-top: 127px;
}

Answer 1

其中一个六边形正在被较小的浏览器宽度向下推，导致整个东西是三个六边形而不是两个。

由于您在.main-content上设置了显式高度，因此无法增长以包含新的六边形排列。您可以在min-height div：

上设置.main-content

.main-content {
    background: url(../images/CBG_03.png) no-repeat;
    min-height: 684px; // min-height
    background-position: center;
    max-width: 100%;
    text-align: center;
    margin-top: -215px;
    position: relative;
    z-index:1;
}

同样，如果您需要高度始终保持不变，则可以对较小的屏幕使用媒体查询，并在较小的屏幕上更改六边形的大小，以便它们不会换行到新的行。 / p>

*编辑：如果您将代码发布到jsfiddle或codepen而不是imgur链接也会更有帮助，这样我们就可以自行编辑和测试代码。

Div重叠另一个div -Bootstrap

1 个答案: