我在保持导航的右边缘与标题的外边缘对齐时遇到问题。有什么简单的方法可以解决这个问题，这样无论浏览器大小如何，它们都可以排列。 我的 HTML 在下面。
<!DOCTYPE html>
<html>
<head>
<title>Webpage Layout</title>
<style>
* {padding: 0px;}
html {
width: 970px;
margin: auto;
}
header, footer {
width: 100%;
text-align: center;
height: 10%;
margin: 5px;
border: 1px solid black;
}
section, nav, aside {
text-align: center;
padding: 0px;
height: 80%;
float: right;
margin: 5px;
border: 1px solid black;
}
section {width: 480px;}
nav, aside {width: 218px;}
</style>
</head>
<body>
<header>
<h1>Header</h1>
</header>
<aside>
<h1>Aside</h1>
</aside>
<section>
<h1>Section</h1>
</section>
<nav>
<h1>Nav</h1>
</nav>
</body>
</html>
任何帮助将不胜感激
最佳答案
我建议你使用 flex，这个 article是 flex css 的良好开端。
我所做的是将内容包装到 flex-div 中，即 body-container。然后我将 section 的 flex-grow 设置为 2，将 aside nav 设置为 1。所以比例为 1:2:1
<!DOCTYPE html>
<html>
<head>
<title>Webpage Layout</title>
<style>
* {
padding: 0px;
}
html {
width: 970px;
margin: auto;
}
.body-container {
display: flex;
}
header, footer {
text-align: center;
height: 10%;
margin: 5px;
border: 1px solid black;
}
section, nav, aside {
text-align: center;
margin: 5px;
border: 1px solid black;
}
section {
flex: 2 0 auto;
}
nav, aside {
flex: 1 0 auto;
}
</style>
</head>
<body>
<header>
<h1>Header</h1>
</header>
<div class="body-container">
<aside>
<h1>Aside</h1>
</aside>
<section>
<h1>Section</h1>
</section>
<nav>
<h1>Nav</h1>
</nav>
</div>
</body>
</html>关于html - 如何让元素对齐到父元素的外边缘，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27728209/