主页 / coding / 问题 / 79350660
Accepted
Matt Schwartz
Asked: 2025-01-13 04:20:26 +0800 CST

我无法让我的 <main> 内容出现在我的 <nav> 内容的右侧[重复]

  • 772

它稍微简化了一点，但是 HTML 看起来像这样：

.navigationContainer {
  display: flex;
  flex-direction: column;
  width: 243px;
  min-width: 0;
  max-width: 242.91015625px;
  height: 1117px;
  background-color: #374151;
}

.mainContent {
  padding-left: 20%;
  display: flex;
  flex-direction: column;
  row-gap: 40px;
  margin: 16px 50px 50px 0;
  min-width: 0;
  max-width: 1380.60546875px;
}
<nav class="navigationContainer">
  ... navigation
</nav>
<main class="mainContent">
  ... some content
</main>

由于某种原因，主内容显示在导航内容下方，而不是右侧。我知道这是 CSS 的问题，但我不知道需要更改什么才能使其按我想要的方式显示。任何帮助都将不胜感激。

html

1 个回答

  1. Best Answer

    您需要将 nav 和 main 放在 中display:flex，并将该元素设置为flex-direction: row。现在您已将这两个元素声明为“常规”内容块，并对其子内容进行弹性定位。

    div:has(nav,main) {
  display: flex;
  flex-direction: row;

  nav, main {
    min-height: 100px;
  }

  nav {
    background-color: #c7c1c1;
  }

  main {
    background-color: #a6c7a1;
  }
}
    <div>
  <nav class="navigationContainer">
  ... navigation
 </nav>
 <main class="mainContent">
    ... some content
  </main>
</div>

    （当然也可能只是<body>元素而不是<div>）

    • 0

相关问题