当屏幕变小时使框堆叠（CSS/HTML）_Html_Css_Block_Responsive

当屏幕变小时使框堆叠（CSS/HTML）

html css

当屏幕变小时使框堆叠（CSS/HTML）,html,css,block,responsive,Html,Css,Block,Responsive,我在我的网站上有一些盒子，我希望它们在屏幕变小时堆叠在一起，而不是盒子变小这就是我的网站现在的样子：如果我把屏幕缩小，它看起来是这样的：但我想做到的是，当屏幕变小时，盒子保持其高度并开始相互堆叠。我必须做些什么才能做到这一点我的代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" name="viewport" content="width=device-width, initi

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

这就是我的网站现在的样子：

如果我把屏幕缩小，它看起来是这样的：

但我想做到的是，当屏幕变小时，盒子保持其高度并开始相互堆叠。我必须做些什么才能做到这一点

我的代码：

    <!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>


* {
框大小：边框框；
}
/*导航栏*/
@仅介质屏幕和（最大宽度：620px）{
/*移动电话：*/
.menu、.main、.right{
宽度：100%；
}
托普纳夫先生{
溢出：隐藏；
背景色：#333；
}
.topnav a{
浮动：左；
显示：块；
颜色：#F2F2；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
字号：17px；
}
.topnav a:悬停{
背景色：#ddd；
颜色：黑色；
}
.主动{
背景色：#4CAF50；
颜色：白色；
}
.topnav.icon{
显示：无；
}
@媒体屏幕和屏幕（最大宽度：600px）{
.topnav a:not（：第一个子项）{display:none；}
.topnav a.icon{
浮动：对；
显示：块；
}
}
@媒体屏幕和屏幕（最大宽度：600px）{
.topnav.responsive{位置：相对；}
.topnav.responsive.icon{
位置：绝对位置；
右：0；
排名：0；
}
.topnav.a{
浮动：无；
显示：块；
文本对齐：左对齐；
}
}
}
.菜单a{
背景色：红色；
填充：8px；
边缘顶部：7px；
显示：块；
宽度：100%；
颜色：黑色；
}
/*霍普博森*/
.mainboxcontainer{
宽度：100%；
文本对齐：居中；
}
.mainbox1{
浮动：左；
宽度：33.3%；
最小高度：15vh；
填充：0 20px；
背景颜色：黄色；
}
.mainbox2{
浮动：左；
宽度：33.3%；
最小高度：15vh；
填充：0 20px；
背景颜色：紫色；
}
.mainbox3{
浮动：左；
宽度：33.3%；
最小高度：15vh；
填充：0 20px；
背景颜色：绿色；
}
.mainbox4{
浮动：左；
宽度：33.3%；
最小高度：15vh；
填充：0 20px；
背景颜色：绿色；
}
.mainbox5{
浮动：左；
宽度：33.3%；
最小高度：15vh；
填充：0 20px；
背景颜色：黄色；
}
.mainbox6{
浮动：左；
宽度：33.3%；
最小高度：15vh；
填充：0 20px；
背景颜色：紫色；
}
你好，世界
同侧阴唇
这是一位杰出的领袖，他是一位伟大的领袖
同侧阴唇
这是一位杰出的领袖，他是一位伟大的领袖
同侧阴唇
这是一位杰出的领袖，他是一位伟大的领袖
同侧阴唇
这是一位杰出的领袖，他是一位伟大的领袖
同侧阴唇
这是一位杰出的领袖，他是一位伟大的领袖
同侧阴唇
这是一位杰出的领袖，他是一位伟大的领袖
函数myFunction（）{
var x=document.getElementById（“myTopnav”）；
如果（x.className==“topnav”）{
x、 类名+=“响应”；
}否则{
x、 className=“topnav”；
}
}

非常感谢你的帮助

问候塞缪尔

谢谢大家的帮助
是的，我是一个新的编码网站，刚刚意识到我的代码冗余-抱歉
出于演示目的，我想在以下网站上实现类似的效果：www.portfoliozora.ch
如果你缩小网站的规模，容器会缩小到一个最小的尺寸，低于规定的尺寸，它们开始堆积在下面
我的计划是确定集装箱的最小和最大宽度和高度。这样做对吗
正如我已经说过的，我两天前开始编写响应性网站，我想通过“边做边学”来形象化和学习。所以，如果你们能引导我走上正确的道路，达到预期的效果，我将非常感激
我还尝试使用@media标记并定义最小宽度和高度，但这也不起作用。我做错了什么

谢谢塞缪尔，这是你的密码。对于
.mainbox
类，您需要在较小的宽度上使用宽度：100%

* { 框大小：边框框； } /*导航栏*/ .菜单a{ 背景色：红色；填充：8px；边缘顶部：7px；显示：块；宽度：100%；颜色：黑色； } /*霍普博森*/ .mainboxcontainer{ 宽度：100%；文本对齐：居中；浮动：左； } .mainbox{ 浮动：左；宽度：33.3%；最小高度：15vh；填充：0 20px； } .mainbox黄色{ 背景颜色：黄色； } .mainbox紫色{ 背景颜色：紫色； } .mainbox绿色{ 背景颜色：绿色； } @仅介质屏幕和（最大宽度：620px）{ /*移动电话：*/ .menu、.main、.right{ 宽度：100%； } 托普纳夫先生{ 溢出：隐藏；背景色：#333； } .topnav a{ 浮动：左；显示：块；颜色：#F2F2；文本对齐：居中；填充：14px 16px；文字装饰：无；字号：17px； } .topnav a:悬停{ 背景色：#ddd；颜色：黑色； } .主动{ 背景色：#4CAF50；颜色：白色； } .topnav.icon{ 显示：无； } } @媒体屏幕和屏幕（最大宽度：600px）{ .topnav a:not（：第一个子项）{display:none；} .topnav a.icon{ 浮动：对；显示：块； } .topnav.responsive{位置：相对；} .topnav.responsive.icon{ 位置：绝对位置；