如何解决使用 Float 元素时自动边距
我正在尝试使用向左浮动并使其中一个容器居中来构建响应式网站，我正在尝试使用自动边距，但它似乎没有做任何事情。
你能指导我如何以响应的方式做到这一点吗？
我知道可能有比使用 float 更聪明的解决方案，但我正在尝试了解有关 float 元素的更多信息。
<style>
* {
Box-sizing: border-Box;
margin: 0px;
}
html,body {
height: 100%;
}
header {
height: 30%;
width: 100%;
float: left;
border-style: solid;
}
nav {
width: 40%;
height: 80%;
border-style: solid;
}
.navbar {
float: right;
}
.part1 {
width: 40%;
height: 80%;
border-style: solid;
margin: auto;
float: left;
}
.whole {
}
main {
border-style: solid;
float: left;
height: 50%;
width: 100%;
}
footer {
border-style: solid;
float: left;
width: 100%;
height: 20%;
}
</style>
HTML：
<body>
<header>
<nav class="navbar">
</nav>
</header>
<main class="whole">
<div class="part1">
</div>
<div class="part1">
</div>
</main>
<footer>
</footer>
</body>
谢谢
解决方法
<input> * {
box-sizing: border-box;
margin: 0px;
}
html,body {
height: 100%;
}
header {
height: 30%;
width: 100%;
float: left;
border-style: solid;
}
nav {
width: 40%;
height: 80%;
border-style: solid;
}
.navbar {
float: right;
}
.part1 {
width: 40%;
height: 80%;
border-style: solid;
margin: auto;
float: left;
}
.whole {
display:flex;
}
main {
border-style: solid;
float: left;
height: 50%;
width: 100%;
}
footer {
border-style: solid;
float: left;
width: 100%;
height: 20%;
}版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
