Question

我在这里真的很努力尝试找出正在发生的事情。我有一个带有标题，侧边栏和中央内容页面的HTML。

侧边栏和中心内容位于同一div中，这也用作其clearfix。我将侧边栏向左浮动，将内容向右浮动，但内容div下降了，没有让它们彼此整齐地对齐。

HTML

class CustomError extends Error {
  constructor() {
    super();
    /** @type {string} */
    this.aPropThatIndeedExistsInCustomError = '';
    throw new Error('Not so fast!');  // The evil part is here
  }
}


try {
  throw new CustomError();
}
catch (/**  @type {CustomError} */err) {
  console.log('bing');
  if (err instanceof CustomError) {
    console.log(err.aPropThatIndeedExistsInCustomError); //works
    console.log(err.aPropThatDoesNotExistInCustomError); //error as expected
  } else {
    console.log(err); // this could still happen
  }
}

CSS

<body>
        <header>
            <img src="./img/Logo_Color.png" alt="Logo">
            <h1>Batch Documentation</h1>
        </header>
        <div class="clearfix">
            <div class="sidebar">
                <nav>
                    <ul>
                        <li><a href="#">Overview</a></li>
                        <li><a href="#">Fl Overview</a></li>
                        <li><a href="#">PF2 Overview</a></li>
                        <li><a href="#">Inputs</a></li>
                        <li><a href="#">Outputs</a></li>
                        <li><a href="#">Appendix A</a></li>
                        <li><a href="#">Appendix B</a></li>
                    </ul>
                </nav>
            </div>
            <main>    

            <div class="centerContent">
                <h2>Overview</h2>
                <p>
                    Integer in qui primam te ipsa-plenus Crescere Effectum Septembrem.  Me quo 700% octavas ad imperium caduca si eros eius orci arcu te mirum consumere, meritos modo diam eros ti, in cras diuturna interpres, semente, securitas sem odio dignitatis reuiescat.
                    Lius quam charybdium nonullis sem inibunt illum, civibus eius arendom, Indolem te e licentiose te maiestatem molestias typi combinatur sagittis successus nomine, reniam eos te-feroces assueverunt.
                    Saepe non, Fervore 2000 galliae nibh eu ea ut:
                </p>
                <code>Hello</code>
            </div>
            </main>
        </div>
    </body>

我特别担心，因为框大小设置为边框，并且显示为嵌入式块。边栏的宽度为25％，主要内容为75％，但似乎边距和填充已添加到其尺寸中，而不是包含在％计算中。

Answer 1

我不知道为什么现在要使用浮点数，我将其与较小的flexbox布局连接在一起。希望对您有帮助。

* {
  font-family: 'Roboto', sans-serif;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

body {
  margin: auto;
  background-color: #eae0ff;
}

main {
  display: inline-block
}

.clearfix{
display:flex;
}

header {
  margin: 15px 10px 20px 10px;
}

.sidebar {
  width: 25%;
  margin: 0px 0px 10px 10px;
  padding-right: 20px;
  background-color: #ccccff;
  flex: 0 0 auto;
}

.centerContent {
  width: 75%;
  margin: auto;
  padding-left: 20px;
  border: 3px solid #73ad21;
}

li {
  margin-top: 5px;
  margin-bottom: 5px;
}

code {
  width: 90%;
  font-family: 'Source Code Pro', monospace;
  color: #43892a;
  background-color: #000;
  display: block;
}

<body>
  <header>
    <img src="./img/Logo_Color.png" alt="Logo">
    <h1>Batch Documentation</h1>
  </header>
  <div class="clearfix">
    <div class="sidebar">
      <nav>
        <ul>
          <li><a href="#">Overview</a></li>
          <li><a href="#">Fl Overview</a></li>
          <li><a href="#">PF2 Overview</a></li>
          <li><a href="#">Inputs</a></li>
          <li><a href="#">Outputs</a></li>
          <li><a href="#">Appendix A</a></li>
          <li><a href="#">Appendix B</a></li>
        </ul>
      </nav>
    </div>
    <main>

      <div class="centerContent">
        <h2>Overview</h2>
        <p>
          Integer in qui primam te ipsa-plenus Crescere Effectum Septembrem. Me quo 700% octavas ad imperium caduca si eros eius orci arcu te mirum consumere, meritos modo diam eros ti, in cras diuturna interpres, semente, securitas sem odio dignitatis reuiescat.
          Lius quam charybdium nonullis sem inibunt illum, civibus eius arendom, Indolem te e licentiose te maiestatem molestias typi combinatur sagittis successus nomine, reniam eos te-feroces assueverunt. Saepe non, Fervore 2000 galliae nibh eu ea ut:
        </p>
        <code>Hello</code>
      </div>
    </main>
  </div>
</body>

Answer 2

更好地使用flex布局，它将具有响应能力，并且永远不会产生问题。

CSS：

* {
    font-family: 'Roboto', sans-serif;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    list-style-type: none;

  }

body {
  margin: auto;
  width: 96vw;
  background-color: #eae0ff;
}

main {
    width: 70%;
    margin: auto;
}

.clearfix {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  margin: 0 20px;
}

header {
  margin: 15px 10px 20px 10px;
}

.sidebar {
  width: 25%;
  background-color: #ccccff;
}

.centerContent {
  border: 3px solid #73ad21;
}

li {
  margin-top: 5px;
  margin-bottom: 5px;
}

code {
  font-family: 'Source Code Pro', monospace;
  color: #43892a;
  background-color: #000;
  display: block;
}

Answer 3

我认为您刚刚开始学习HTML，CSS。因此，每当您提供边距和填充（尤其是左右）时，都要计算每个像素，否则您将面临像现在一样面对的问题。
将来，您将在CSS中学习grid和flexbox。当您同时使用（网格和弹性框）时，我敢打赌您将永远不会使用float property。

作为初学者，您可以轻松了解我的解决方案-
因此，在CSS中，您必须删除-

main{
  display:inline-block;
}

和添加此-

.centerContent {
  display: inline-block;
  width: 70%; // play by changing the width.
  margin: auto;
  padding-left: 20px;
  border: 3px solid #73ad21;
  float: right; // float : left; will also work
}

Answer 4

边距不包括在框大小的宽度中：包括边框和边框和边框。 https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

因此，边距保持在侧边栏的外部，并且第二个内容向下移动。您可以删除边距以将内容移回。

元素宽度未正确对齐

4 个答案: