当屏幕变小(CSS/HTML)时，使框堆叠

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

这就是我的网站现在的样子：在这里输入图片描述

如果我把屏幕缩小，它看起来是这样的：在此处输入图像描述

但我想实现的是，当屏幕越来越小时，盒子保持它们的高度，并开始相互堆叠。我该怎么做才能做到这一点？

我的代码：

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

非常感谢的帮助

问候Samuel

感谢大家的帮助

是的，我刚开始对网站进行编码，刚刚意识到我的代码是多余的——很抱歉。

出于演示目的，我想在以下网站上获得类似效果：www.portfoliozora.ch

如果你缩小网站的规模，容器就会缩小到最小尺寸，低于定义的尺寸，它们就会开始堆积在下面。

我的计划是为容器定义最小和最大宽度和高度。这样做对吗？

正如我已经说过的，我像两天前一样开始对响应式网站进行编码，我想通过"边做边学"来可视化和学习。所以，如果你们能带领我走上正确的道路，达到预期的效果，我将不胜感激。

我还试着用@media标签来定义最小宽度和高度，但这也不起作用。我做错了什么？

感谢Samuel

请检查此代码。你的代码有很多重复项。我只是优化了它并添加了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>

这是您的代码。对于较小宽度的.mainbox类，您需要使用宽度：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>

相关内容

最新更新

热门标签：