#css
#css
Вопрос:
У меня есть div, который я пытаюсь поместить внутри другого div. Розовый div — это контейнер, а красный div — мой. Мой div содержит внутренний div шириной 44 пикселя. CSS-свойствами моего div являются float: right , text-align: center , box-sizing: border-box и border-collapse: collapse . Когда я устанавливаю width: 44px , я получаю следующий результат:
Однако, когда я устанавливаю width: 15% , поле перемещается к краю экрана, а не к краю содержащего div. Никакие другие свойства между этими двумя изображениями не изменяются.
Чем объясняется такое поведение?
JsFiddle:http://jsfiddle.net/xU9RV /
Комментарии:
1. Было бы намного проще, если бы вы могли предоставить HTML, а также больше CSS (для div контейнера и не только). Чем больше, тем лучше. Также вы могли бы поместить его в jsfiddle, чтобы мы могли видеть проблему вживую.
2. Самый внутренний div больше, чем 15% div, что приводит к его переполнению из контейнера.
Ответ №1:
Одним из важных аспектов того, как работает ширина в процентах, является то, что они зависят от ширины родительского элемента.
<div style="width: 100px; height: 100px; background-color: blue;">
<div style="float: right; width: 15%; background-color: pink;">
<div style="width: 44px; height: 44px; background-color: red;">
</div>
</div>
</div>
Как вы можете видеть в вашем коде здесь, вы установили ширину первого div в 100 пикселей. Для второго div установлено значение 15%, а процентное соотношение зависит от родительской ширины, оно имеет ширину всего 15 пикселей. Поэтому, когда третий div будет иметь ширину 44 пикселя, он переполнит родительский контейнер и будет отображаться так, как если бы он находился на полпути за пределами первого div.
Чтобы получить ту же ширину процента, что и значение в пикселях, вы должны использовать 44% от 100 пикселей родительского значения.
Поэтому при работе с шириной важно иметь в виду, что процент зависит от родительской ширины.