如何让元素与父元素的外边缘对齐答案

【问题标题】：How to get element to line up to outer edge of parent element如何让元素与父元素的外边缘对齐
【发布时间】：2015-01-01 04:09:20
【问题描述】：

我在保持导航的右边缘与标题的外边缘对齐时遇到问题。有没有什么简单的方法可以解决这个问题，所以无论浏览器大小如何，它们都会排列整齐。我的 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>

任何帮助将不胜感激

【问题讨论】：

标签： html css nav

【解决方案1】：

我建议你使用 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>

【讨论】：

谢谢，这已经解决了问题。能否请您描述一下 flex 的工作原理，因为我以前从未遇到过这个属性。
不客气。我在上面发布的链接确实是了解 flex 的一个很好的开始，你可以看看。它通过自动计算元素的宽度/高度来工作，并声称也具有良好的性能。
是否可以将同样的东西与固定位置的标题一起使用？
对不起@BrianKarl，你是什么意思使用固定位置的标题？ :)
但是设置它的目的是什么？当您进行滚动时，是否让标题始终出现在顶部？如果是，您可能希望将margin-top 与body-container 元素的标题高度一起使用，那么它应该可以工作

【解决方案2】：

在正文中添加此属性。

body{  
margin: 0 auto;
    max-width: 100%;
    padding: 0;
    width: 100%;
}

【讨论】：

我试过这个，但现在它不会在左边或右边排列。我应该使用百分比而不是像素来表示宽度吗？
您可以在部分中增加一些宽度（像素或百分比）