Правый Div неправильно выравнивает по левому краю 25% страницы

Я пытаюсь центрировать один div, помещая его между двумя div - centerdiv и sidedivs.

Код:

.overmiddlediv {
  width: 100%;
  height: 150px;
  background-color: blue;
  float: left;
}
.sidedivs {
  width: 25%;
  float: left;
  padding-left: 50px;
  background-color: red;
}
.centerdiv {
  width: 50%;
  float: left;
  background-color: white
}
<div class="overmiddlediv">
  <div class="sidedivs">
    <p>Left side</p>
  </div>
  <div class="centerdiv">
    <p>This is the middle and is 50%</p>
  </div>
  <div class="sidedivs">
    <p>Right side</p>
  </div>
</div>

JSFiddle по этой ссылке показывает вывод, и это неверно, так как правая сторона находится слева, когда должна быть справа от белой фигуры и также должно быть 25%.

Я играл с удалением float:left на .sidedivs и пробовал абсолютную позицию, но безуспешно. Что странно, так это то, что я использовал ту же самую структуру кода для нижнего колонтитула, и он работал именно так, как должен - разделяя каждую часть на требуемые 25%-50%-25%, но на этом это не так, и я не уверен, что мне не хватает.

Посмотрите на этот JSFiddle, где все левые элементы и теги p были удалены.


html css css-float box-sizing
person wpquestionz    schedule 30.09.2016    source источник
comment
у вас есть класс, который имеет float:left, прикрепленный к обеим сторонам div, поэтому они оба будут идти влево   -  person Keith    schedule 30.09.2016
comment
удалите padding или используйте * { box-sizing: border-box; }, или вы должны настроить распределение ширины 25%-50%-25%, используя calc, чтобы предотвратить перенос.   -  person kukkuz    schedule 30.09.2016
comment
@Keith Спасибо, но даже если я удалю их, как я написал в своем посте, он все равно неправильно оборачивает их. См. пример этой скрипты — jsfiddle.net/pe8smexz/1.   -  person wpquestionz    schedule 30.09.2016

Ответы (3)


arrow_upward
2
arrow_downward

Добавьте это в CSS, чтобы на ваши процентные значения не влияли/не изменялись отступы и поля:

html, body {
  margin: 0;
}
* {
  box-sizing: border-box;
}

https://jsfiddle.net/hkq7ttvj/1/

person Johannes    schedule 30.09.2016
comment
Работал; Я не знал, что тело по умолчанию имеет заданное поле, но это очень полезно знать. Мне нужно посмотреть, что делает border-box. - person wpquestionz; 30.09.2016
comment
@wpquestionz прочитайте это, чтобы узнать больше о border-box. - person kukkuz; 30.09.2016

arrow_upward
2
arrow_downward

Вы должны установить box-sizing:border-box: https://jsfiddle.net/v9f1qbng/1/, иначе ширина будет добавлена к размеру набивки.

person Stefano Balzarotti    schedule 30.09.2016

arrow_upward
1
arrow_downward

Удалите заполнение из sidedivs или используйте:

 * { 
   box-sizing: border-box; 
 }

Переработана скрипка.

Прочтите этот ответ, чтобы узнать больше о border-box.

Или вы должны настроить распределение ширины 25%-50%-25%, используя calc, чтобы предотвратить перенос.

person kukkuz    schedule 30.09.2016