Question

我使用 CSS 和 HTML 制作了一个侧边栏。但是，无论我做什么，当我尝试在 HTML 页面上放入一些内容时，它都会出现在页面左上角的侧边栏下方。如何在页面右侧放置固定内容？

下面是我的 CSS 代码，如果有什么东西阻止了主要内容进入页面的右中心，请告诉我。

.sidebar a {
  display: block;
  padding: 10px;
}

body {
  background-color: white;
}

.sidebar {
  margin: 14px;
  padding: 0;
  width: 175px;
  position: fixed;
  height: 100%;
  overflow: auto;
  text-align: left;
  margin-left: 30px;
}

<!DOCTYPE HTML>
<html lang="en" dir="ltr">

<head>
  <link href="myMenuStyle.css" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?    family=Bungee+Hairline&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
  <meta charset="utf-8">
  <link rel="import" href="TableOfContent.html">
  <title>about me</title>
  <link rel="icon" href="cool.ico">

</head>

<body>
  <!-- The sidebar -->
  <div class="sidebar">
    <a id='one' href="TableOfContent.html" style="font-weight: bold">Table of Content</a>
    <p><u>Visual Communication:</u></p>
    <bl>
      <a id='two' class='click' href="GraphicD.html">Graphic Design</a>
      <a id='three' class='click' href="Illustration.html">Illustration</a>
      <a id='four' class='click' href="Photography.html">Photography</a>
      <p><u>Multi Media/Digital Media:</u></p>
      <a id='five' class='click' href="Scripting.html">Scripting</a>
      <a id='six' class='click' href="Sound.html">Sound</a>
      <p><u>Programming:</u></p>
      <a id='seven' class='click' href="Coding.html">Coding</a>
      <a id='eight' class='click' href="Game.html">Interactive/Game Design</a>
      <a id='nine' class='click' href="Arduino.html">Hardware/Electrical Circuit</a>
      <p><br></p>
  </div>

  <!-- Page content -->
  <p>Testing</p>


</body>

</html>

Answer 1

你需要先定义一个 flexbox 布局来从左到右组织内容，这与默认的 HTML DOM 行为从上到下形成对比。为此，您首先将整个容器包装在 div 中并在其上应用 display: flex。然后设置 flex-direction: row 以将其从左到右排序。然而，当您将块定义为 position: fixed 时，它会被带出文档模型，因此您的右侧内容会显示在左侧 fixed 位置块下。为了克服这个问题，请为您的右侧内容应用左边距（假设大约 15%，基于您的左侧容器宽度）。

我对 HTML 文件进行了一些更改以应用 flexbox：

.sidebar a {
  display: block;
  padding: 10px;
}

body {
  background-color: white;
}

.sidebar {
  margin: 14px;
  padding: 0;
  width: 175px;
  position: fixed;
  height: 100%;
  text-align: left;
  margin-left: 30px;
}

.main {
  display: flex;
  flex-direction: row;
}

.content {
  margin-top: 20px;
  margin-left: 15%;
}

<!DOCTYPE HTML>
<html lang="en" dir="ltr">

<head>
  <link href="myMenuStyle.css" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?    family=Bungee+Hairline&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
  <meta charset="utf-8">
  <link rel="import" href="TableOfContent.html">
  <title>about me</title>
  <link rel="icon" href="cool.ico">

</head>

<body>
  <!-- The sidebar -->
  <div class="main">
    <div class="sidebar">
      <a id='one' href="TableOfContent.html" style="font-weight: bold">Table of 
    Content</a>
      <p><u>Visual Communication:</u></p>
      <bl>
        <a id='two' class='click' href="GraphicD.html">Graphic Design</a>
        <a id='three' class='click' href="Illustration.html">Illustration</a>
        <a id='four' class='click' href="Photography.html">Photography</a>
        <p><u>Multi Media/Digital Media:</u></p>
        <a id='five' class='click' href="Scripting.html">Scripting</a>
        <a id='six' class='click' href="Sound.html">Sound</a>
        <p><u>Programming:</u></p>
        <a id='seven' class='click' href="Coding.html">Coding</a>
        <a id='eight' class='click' href="Game.html">Interactive/Game Design</a>
        <a id='nine' class='click' href="Arduino.html">Hardware/Electrical Circuit</a>
        <p><br></p>
    </div>

    <!-- Page content -->
    <div class="content">
      <p>Testing</p>
    </div>

  </div>
</body>

</html>

有关 Flexbox 的更多信息 - here

固定侧边栏重叠页面内容？

1 个答案: