元素宽度未正确对齐

问题描述 投票：0回答：3

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

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

HTML

<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>

CSS

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

  }

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

main {
  display: inline-block
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

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

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

.centerContent {

  width: 75%;
  margin: auto;
  padding-left: 20px;
  border: 3px solid #73ad21;
  float: right;
}

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

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

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

html css css-float width clearfix
3个回答
0
投票

我不知道为什么现在要使用浮点数，我将其与较小的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>
0
投票

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

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

0
投票

更好地使用弹性布局，它将具有响应性，并且从不产生问题。

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;
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.