屏幕变小时使盒子堆叠（CSS / HTML）

时间：2018-08-07 06:37:57

标签： html css block responsive

我的网站上有一些盒子，我希望它们在屏幕变小时彼此叠放，而不是盒子变小。

这就是我的网站现在的外观：enter image description here

如果我将屏幕缩小，它看起来像这样： enter image description here

但是我要实现的是，当屏幕越来越小时，盒子保持高度并开始彼此堆叠。要完成此操作，我该怎么办？

我的代码：

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
  box-sizing: border-box;
}

/* Navbar */

@media only screen and (max-width:620px) {
  /* For mobile phones: */
  .menu, .main, .right {
    width:100%;
  }
  .topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.active {
  background-color: #4CAF50;
  color: white;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
}
.menu a {
  background-color:red;
  padding:8px;
  margin-top:7px;
  display:block;
  width:100%;
  color:black;
}

/* Hauptboxen */

.mainboxcontainer {
  width:100%;
    text-align:center;

}
.mainbox1 {
  float:left;
  width:33.3%;
  min-height: 15vh;
  padding:0 20px;
  background-color: yellow;
}

.mainbox2 {
  float:left;
  width:33.3%;
  min-height: 15vh;
  padding:0 20px;
  background-color: purple;
}

.mainbox3 {
  float:left;
  width:33.3%;
  min-height: 15vh;
  padding:0 20px;
  background-color: green;
}


.mainbox4 {
  float:left;
  width:33.3%;
  min-height: 15vh;
  padding:0 20px;
  background-color: green;
}

.mainbox5 {
  float:left;
  width:33.3%;
  min-height: 15vh;
  padding:0 20px;
  background-color: yellow;
}

.mainbox6 {
  float:left;
  width:33.3%;
  min-height: 15vh;
  padding:0 20px;
  background-color: purple;
}


</style>
</head>
<body style="font-family:Verdana;color:#aaaaaa;">
  <div class="topnav" id="myTopnav">
    <a href="#home" class="active">Home</a>
    <a href="#news">Webdesign</a>
    <a href="#contact">Portfolio</a>
    <a href="#about">Über uns</a>
    <a href="#about">Kontakt</a>
    <a href="javascript:void(0);" class="icon" onclick="myFunction()">
      <i class="fa fa-bars"></i>
    </a>
  </div>

<div style="background-color:#e5e5e5;padding:15px;text-align:center;">
  <h1>Hello World</h1>
</div>

<div class="mainboxcontainer">
  <div class="mainbox1">
    <h2>Lorum Ipsum</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  </div>

  <div class="mainbox2">
    <h2>Lorum Ipsum</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  </div>

  <div class="mainbox3">
    <h2>Lorum Ipsum</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  </div>

  <div class="mainbox4">
    <h2>Lorum Ipsum</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  </div>

  <div class="mainbox5">
    <h2>Lorum Ipsum</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  </div>

  <div class="mainbox6">
    <h2>Lorum Ipsum</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  </div>
</div>



<script>
function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}
</script>
</body>
</html>

非常感谢您的帮助

向塞缪尔打招呼

感谢很多人的帮助！

是的，我是网站编码的新手，刚刚意识到我的代码很多余-对此感到抱歉。

出于演示目的，我想在以下站点上达到某种效果：www.portfoliozora.ch

如果您缩小网站的比例，然后将容器缩小到最小尺寸（小于定义的尺寸），则容器开始在下方堆叠。

我的计划是定义容器的最小和最大宽度和高度。这是正确的方法吗？

正如我已经说过的，我从两天前开始编写响应式网站，我想通过“边做边学”来形象化和学习。因此，如果你们能带领我走上正确的道路，以实现理想的效果，我将不胜感激。

我也尝试使用@media标记并定义最小宽度和高度，但这也不起作用。我在做什么错了？

感谢塞缪尔

2 个答案:

答案 0 :(得分：0)

这是您的代码。您需要为.mainbox类使用width：100％，宽度较小。

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
  box-sizing: border-box;
}

/* Navbar */
.menu a {
  background-color:red;
  padding:8px;
  margin-top:7px;
  display:block;
  width:100%;
  color:black;
}

/* Hauptboxen */

.mainboxcontainer {
  width:100%;
  text-align:center;
  float: left;

}
.mainbox {
  float: left;
  width: 33.3%;
  min-height: 15vh;
  padding: 0 20px;

}
.mainbox-yellow {
  background-color: yellow;
}

.mainbox-purple {
  background-color: purple;
}

.mainbox-green {
  background-color: green;
}
@media only screen and (max-width:620px) {
  /* For mobile phones: */
  .menu, .main, .right {
    width:100%;
  }
  .topnav {
    overflow: hidden;
    background-color: #333;
  }

  .topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
  }

  .topnav a:hover {
    background-color: #ddd;
    color: black;
  }

  .active {
    background-color: #4CAF50;
    color: white;
  }

  .topnav .icon {
    display: none;
  }
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .mainbox {
    width: 100%;
  }
}

</style>
</head>
<body style="font-family:Verdana;color:#aaaaaa;">
  <div class="topnav" id="myTopnav">
    <a href="#home" class="active">Home</a>
    <a href="#news">Webdesign</a>
    <a href="#contact">Portfolio</a>
    <a href="#about">Über uns</a>
    <a href="#about">Kontakt</a>
    <a href="javascript:void(0);" class="icon" onclick="myFunction()">
      <i class="fa fa-bars"></i>
    </a>
  </div>

<div style="background-color:#e5e5e5;padding:15px;text-align:center;">
  <h1>Hello World</h1>
</div>

<div class="mainboxcontainer">
  <div class="mainbox mainbox-yellow">
    <h2>Lorum Ipsum</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  </div>

  <div class="mainbox mainbox-purple">
    <h2>Lorum Ipsum</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  </div>

  <div class="mainbox mainbox-green">
    <h2>Lorum Ipsum</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  </div>

  <div class="mainbox mainbox-green">
    <h2>Lorum Ipsum</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  </div>

  <div class="mainbox mainbox-yellow">
    <h2>Lorum Ipsum</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  </div>

  <div class="mainbox mainbox-purple">
    <h2>Lorum Ipsum</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  </div>
</div>



<script>
function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}
</script>
</body>
</html>

答案 1 :(得分：0)

请检查此代码。您的代码有很多重复项。我刚刚对其进行了优化，并添加了box-sizing: border-box;。这样它将以您想要的方式工作。请检查并告知我。

 .menu a {
     background-color: red;
     padding: 8px;
     margin-top: 7px;
     display: block;
     width: 100%;
     color: black;
 }

 /* Hauptboxen */

 .mainboxcontainer {
     width: 100%;
     text-align: center;
 }

 .mainbox {
     float: left;
     width: 33.3%;
     min-height: 15vh;
     padding: 0 20px;
     box-sizing: border-box;
 }

 .mainbox1 {
     background-color: yellow;
 }

 .mainbox2 {
     background-color: purple;
 }

 .mainbox3 {
     background-color: green;
 }

 .mainbox4 {
     background-color: grey;
 }

 .mainbox5 {
     background-color: yellow;
 }

 .mainbox6 {
     background-color: purple;
 }

 @media screen and (max-width: 600px) {
     .mainbox {
         width: 50%;
     }
 }
<div class="topnav" id="myTopnav">
    <a href="#home" class="active">Home</a>
    <a href="#news">Webdesign</a>
    <a href="#contact">Portfolio</a>
    <a href="#about">Über uns</a>
    <a href="#about">Kontakt</a>
    <a href="javascript:void(0);" class="icon" onclick="myFunction()">
        <i class="fa fa-bars"></i>
    </a>
</div>

<div style="background-color:#e5e5e5;padding:15px;text-align:center;">
    <h1>Hello World</h1>
</div>

<div class="mainboxcontainer">
    <div class="mainbox1 mainbox">
        <h2>Lorum Ipsum</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
            magna aliquam erat volutpat.</p>
    </div>

    <div class="mainbox2 mainbox">
        <h2>Lorum Ipsum</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
            magna aliquam erat volutpat.</p>
    </div>

    <div class="mainbox3 mainbox">
        <h2>Lorum Ipsum</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
            magna aliquam erat volutpat.</p>
    </div>

    <div class="mainbox4 mainbox">
        <h2>Lorum Ipsum</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
            magna aliquam erat volutpat.</p>
    </div>

    <div class="mainbox5 mainbox">
        <h2>Lorum Ipsum</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
            magna aliquam erat volutpat.</p>
    </div>

    <div class="mainbox6 mainbox">
        <h2>Lorum Ipsum</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
            magna aliquam erat volutpat.</p>
    </div>
</div>

相关问题
最新问题