Ширина элементов не выравнивается должным образом - PullRequest
Новая
       33

Ширина элементов не выравнивается должным образом

0 голосов
/ 11 февраля 2020

Я действительно изо всех сил пытаюсь выяснить, что происходит. У меня есть HTML с заголовком, боковой панелью и центральной страницей контента.

Боковая панель и центральный контент находятся в одном и том же элементе div, который также действует как их исправление. Я переместил боковую панель влево и содержимое вправо, но вместо аккуратного выравнивания друг друга, 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%, однако кажется, что поля и отступы добавляются к их размерам, а не включаются в расчет%.

Ответы [ 4 ]

1 голос
/ 11 февраля 2020

Я думаю, вы только начали учиться HTML, CSS. Поэтому, когда бы вы ни указали поля и отступы (особенно левый и правый), подсчитайте каждый пиксель, иначе вы столкнетесь с такими проблемами, с которыми сталкиваетесь сейчас.
В будущем вы изучите grid и flexbox в 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
}
1 голос
/ 11 февраля 2020

Лучше использовать гибкий макет, он будет отзывчивым и никогда не создает проблем.

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;
}
1 голос
/ 11 февраля 2020

Я не знаю, почему вы используете поплавки, я прикрепил то же самое с небольшим макетом 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 голосов
/ 11 февраля 2020

Поля не учитываются в ширине для размеров окна: рамки и рамки рамки включены. https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

Таким образом, поле остается внешним по отношению к боковой панели, а второй контент перемещается вниз. Вы можете удалить поля, чтобы переместить содержимое обратно.

...