如何使元素与父元素的外边缘对齐

布赖恩·卡尔

我在将导航器的右边缘与页眉的外边缘对齐时遇到问题。有没有简单的方法可以解决此问题，因此无论浏览器大小如何，它们都能对齐。我的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，这篇文章是flex CSS的一个好的开始。

我所做的是将内容包装到flex-div中body-container。然后我将的flex-grow设置section为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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。