Процент ширины Div не работает в CSS

Вот мой CSS:

.leftdiv {
    width:20%;
    border:2px solid blue;
    float:left;
}

.middlediv {
    width:60%;
    border:1px solid orange;
    float:left;
}

.rightdiv {
    width:20%;
    border:1px solid black;
    float:right;
}

Вот мой html:

<body>
    <div class="leftdiv">left</div>
    <div class="middlediv">middle</div>
    <div class="rightdiv">right</div>
</body>

Я ожидаю увидеть три элемента div на экране, занимающие 100% ширины экрана.

Вместо этого посмотрите это:

введите здесь описание изображения

Правый div находится на следующей строке.


html css box-sizing
person Ray    schedule 30.09.2017    source источник
comment
аналогичная проблема stackoverflow.com/questions/39284679   -  person kukkuz    schedule 01.10.2017

Ответы (4)


arrow_upward
2
arrow_downward

Это из-за границ. Если вы оставите границы, ваш div выровняется. Использование рамки решает проблему:

 .leftdiv{
box-sizing: border-box; 
width:20%;
border:2px solid blue;
float:left;}

.middlediv{
box-sizing: border-box;
width:60%;
border:1px solid orange;
float:left;}

.rightdiv{
box-sizing: border-box;
width:20%;
border:1px solid black;
float:right;}

Идея блока box-sizing: border заключается в том, что он модифицирует поведение обычной модели блока, чтобы интерпретировать отступы и границы как часть элемента ширины. Итак, теперь, когда вы устанавливаете ширину%, граница уже учитывается. Вот почему теперь 20+20+60 составляют 100%.

Дополнительную информацию можно найти по этой ссылке

person Willem van der Veen    schedule 30.09.2017

arrow_upward
2
arrow_downward

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

div { box-sizing: border-box; }

Или, что предпочтительнее, добавьте его в каждый отдельный блок стиля div (потому что вы, возможно, не захотите применять его ко всем div на странице).

.leftdiv,.middlediv,.rightdiv{
  box-sizing: border-box;
}

Пример: https://codepen.io/anon/pen/RLZWWO

person delinear    schedule 30.09.2017

arrow_upward
1
arrow_downward

Граница занимает дополнительное пространство, которое не учитывается в ширине блока. Попробуйте добавить box-sizing: border-box; к каждому из ваших классов div.

person B. Fleming    schedule 30.09.2017

arrow_upward
1
arrow_downward

Вы должны добавить это:

html, body {
  margin: 0;
}

чтобы сбросить поле по умолчанию для всех обертывающих элементов body и html до нуля

а также

* {
  box.sizing: border-box;
}

чтобы включить отступы и границы в ваши процентные значения.

html,
body {
  margin: 0;
}

* {
  box-sizing: border-box;
}

.leftdiv {
  width: 20%;
  border: 2px solid blue;
  float: left;
}

.middlediv {
  width: 60%;
  border: 1px solid orange;
  float: left;
}

.rightdiv {
  width: 20%;
  border: 1px solid black;
  float: right;
}
<body>
  <div class="leftdiv">left</div>
  <div class="middlediv">middle</div>
  <div class="rightdiv">right</div>
</body>

person Johannes    schedule 30.09.2017