Поля добавляются к общей ширине, несмотря на использование размеров окна - PullRequest
Новая
       72

Поля добавляются к общей ширине, несмотря на использование размеров окна

0 голосов
/ 27 января 2020

Я сталкиваюсь с проблемой, когда запас моих элементов добавляется к их общей ширине, а не учитывается до вычисления ширины, несмотря на использование свойства box-sizing: border-box.

В общем, у меня есть 2 элемента: боковая панель и основной контент div, которые аккуратно сложены вместе, когда нет полей. Но как только я добавляю поля, боковая панель поднимается поверх содержимого. 

* {
  font-family: 'Roboto', sans-serif;
}

body {
  width: 1265px;
  display: inline-block;
  box-sizing: border-box;
}

main {
  margin: auto;
}

.centerContent {
  width: 75%;
  margin: auto;
  float: right;
}

.sidebar {
  width: 25%;
  height: 100%;
  margin-top: 10px;
  float: left;
  background-color: #eaf4f7;
  margin-left: 10px;
  margin-right: 10px;
}

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

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

header {
  margin-left: 15px;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #a72525;
}
<body>
  <header>
    <h1>Batch Documentation</h1>
  </header>
  <main class="clearfix">
    <div class="sidebar">
      <ul>
        <li>Test</li>
        <li>Test2</li>
        <li>Test3</li>
      </ul>
    </div>
    <div class="centerContent">
      <h2>Sample text</h2>
      <code>Hello</code>
    </div>
  </main>
</body>

Я ожидаю, что на выходе будет боковая панель слева и содержимое рядом с ней, но я смогу определить поля / отступы, не искажая модель.

1 Ответ

0 голосов
/ 27 января 2020

Вам нужно добавить box-sizing:border-box; в свой универсальный селектор, проверьте это: https://www.w3schools.com/cssref/css3_pr_box-sizing.asp

* {
  box-sizing:border-box;
  font-family: 'Roboto', sans-serif;

}

После этого вам нужно сделать несколько изменения в классе боковой панели, поверните margin-left и margin-right на padding-left и padding-right

.sidebar {
    width: 25%;
    height: 100%;
    margin-top: 10px;
    float: left;
    background-color: #eaf4f7;
    padding-left: 10px;
    padding-right: 10px;
}

. В качестве отступа задайте пространство внутри width: 25%;, поле задайте пространство вокруг width: 25%;, так что это увеличивает значение на 25%, а раскладка разбивается на две строки

ОБНОВЛЕНИЕ

Используя поля вместо отступов, вы можете добавить width: calc(25% - 20px);, первое значение - это ширина элемента div, а второе - сумма значений полей 

* {
  font-family: 'Roboto', sans-serif;
}

body {
  width: 1265px;
  display: inline-block;
  box-sizing: border-box;
}

main {
  margin: auto;
}

.centerContent {
  width: 75%;
  margin: auto;
  float: right;
}

.sidebar {
   width: calc(25% - 20px);
    height: 100%;
    margin-top: 10px;
    float: left;
    background-color: #eaf4f7;
    margin-left: 10px;
    margin-right: 10px;
}

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

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

header {
  margin-left: 15px;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #a72525;
}
<body>
  <header>
    <h1>Batch Documentation</h1>
  </header>
  <main class="clearfix">
    <div class="sidebar">
      <ul>
        <li>Test</li>
        <li>Test2</li>
        <li>Test3</li>
      </ul>
    </div>
    <div class="centerContent">
      <h2>Sample text</h2>
      <code>Hello</code>
    </div>
  </main>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...