Добавление <! DOCTYPE html> выравнивание руин

Я забыл добавить <!DOCTYPE html> в некоторые проекты, поэтому я вернулся и добавил его. Это разрушило выравнивание/высоту нескольких элементов, но я смог исправить это, добавив в px или %, где он отсутствовал.Добавление <! DOCTYPE html> выравнивание руин

Однако в одном из моих проектов это не устранило проблему. Вот fiddle. Это высота кнопок, которая должна заполнять весь контейнер. Он отлично работает без <!DOCTYPE html>. Я посмотрел на другие подобные вопросы, но совет (добавить отсутствующий px или %) не сработал.

Вот CSS для кнопок:

button { 
    padding: 0px !important; 
    margin: 0px !important; 
    height: 15% !important; 
    width: 25%; 
    display: block; 
    float: left; 
    background-color: #F8B8B8; 
    border: 1px solid #fee; 
    border-bottom: none; 
    border-left: none; 
}

источник

2016-10-03 l-emi

Не используйте идентификатор как классы, идентификатор MUST быть уникальным для всего документа – Sojtin

Это также может помочь: http://stackoverflow.com/a/31728799/3597276 –

https://jsfiddle.net/tn3z9e6k/4/

.buttonrow { // created from #buttonrow 
    width: 100%; 
    padding: 0px; 
    margin: 0px; 
    height:calc(400px/5); // total height/rows 
} 


button { 
    padding: 0px !important; 
    margin: 0px !important; 
    height: 100% !important; 
    width: 25%; 
    display: block; 
    float: left; 
    background-color: #F8B8B8; 
    border: 1px solid #fee; 
    border-bottom: none; 
    border-left: none; 
}

источник

2016-10-03 11:18:56 Sojtin

Это сработало, спасибо! Единственная проблема заключается в том, что калькулятор слишком длинный, поэтому вместо 'height: calc (400px/5):' Я использовал 'height: calc (400px/6.5);'. –

Я использую 'calc()' только для удобства чтения, так как было 5 строк кнопок, вы можете использовать нормальное значение в пикселях/em/rem и т. Д. – Sojtin

процент работы в зависимости от высоты родительского контейнера, поэтому следует отметить высоту до #buttons (кнопки контейнера DIV).

смотри ниже CSS -

#buttons { 
    height: 75%; 
} 

#buttonrow { 
    height: 20%; /* you have 5 rows, so it will be 20% */ 
} 

#buttons button { 
    height: 100% !important; 
}

источник

2016-10-03 11:18:48

Fiddle:

https://jsfiddle.net/KiranKumarDash/w3xshybk/3/

Проблема заключается не в объявлении DOCTYPE. Вы не установили высоту divs правильно.

Вы установили высоту div с id calcbox до 400px.

Но следующий ребенок с id buttons не принимает полную высоту calcbox. Таким образом, я назначил ему 100% высоты.

Затем я назначил 20% высоты до #buttonrow, так что 5 рядов занимают 20% от общей высоты.

Затем я добавил 100% высоты к кнопкам.

(Ваша ошибка:. Добавление высоты 15% до кнопки не будет принимать 15% от 400px, но будет принимать 15% от его родителей т.е. buttonrow)

https://jsfiddle.net/KiranKumarDash/w3xshybk/3/

источник

2016-10-03 11:20:57

Добавление <! DOCTYPE html> выравнивание руин

ответ

Смежные вопросы