如何在窗口大小调整时减少 div 之间的边距？
我正在开发一个项目，其中有一个左侧菜单和一个表单，如下图所示：
正如您所看到的，这两个元素之间有一个边距，在此如果边距应用于表格左侧。现在，也许有一个简单的解决方案，但我一直在努力寻找它，有没有什么方法可以在调整大小时一旦表单溢出视口，边距就开始减少？
像 vw 或 % 这样的相对单位不是一个选项，因为它们会分配屏幕的百分比，但永远不会是 0。基本上我想开始缩小边距，直到表单当我调整屏幕大小时，元素会点击菜单。像这样的东西：
唯一的限制是边距不得大于 180px。这是我用于此示例的 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.0">
<title>Document</title>
<style>
body, html {
box-sizing: border-box;
margin: 0;
padding: 0;
height: 100%;
}
.container {
width: 100%;
display: flex;
flex-direction: row;
background-color: #ccc;
}
.left-menu {
flex-shrink: 0;
width: 450px;
min-height: 100vh;
background-color: purple;
text-align: center;
}
.form {
width: 500px;
height: 500px;
background-color: blue;
margin-left: 180px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="left-menu">
<h1>Menu</h1>
</div>
<div class="form">
<h1>Form</h1>
</div>
</div>
</body>
</html>
也许这可以在没有边距的情况下实现，但可以通过布局或其他解决方法来实现，但欢迎任何想法。
I'm working on a project in which I have a left menu and a form positioned as can be seen in the following image:
As you can see there is a margin between these two elements, in this case the margin was applied to the form on the left side. Now, maybe there is a simple solution for this but I've been stuck trying to find it, is there any way in which the margin start to decrease as soon as the form overflows the viewport when resizing?
Relative units like vw or % are not an option because they will assign a porcentage of the screen but never will be 0. Basically I want to start shrinking the margin until the form element hits the Menu as I resize the screen. Something like this:
The only constraint is that the margin should not be greater than 180px. Here's the html that I used for this example:
<!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.0">
<title>Document</title>
<style>
body, html {
box-sizing: border-box;
margin: 0;
padding: 0;
height: 100%;
}
.container {
width: 100%;
display: flex;
flex-direction: row;
background-color: #ccc;
}
.left-menu {
flex-shrink: 0;
width: 450px;
min-height: 100vh;
background-color: purple;
text-align: center;
}
.form {
width: 500px;
height: 500px;
background-color: blue;
margin-left: 180px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="left-menu">
<h1>Menu</h1>
</div>
<div class="form">
<h1>Form</h1>
</div>
</div>
</body>
</html>
Maybe this could be achieved without margins but with layouts or another workaround, any idea is welcome though.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您可以使用
class="form-container"将class="form"元素包装在另一个 div 中。并添加以下 css：You can wrap your
class="form"element inside of another div withclass="form-container". And add the following css: