#html #css
Вопрос:
Я начал изучать HTML и CSS и столкнулся со следующей проблемой. Сказано, что дочерний элемент всегда (на данный момент) меньше родительского контейнера. Вот чего я не понимаю.
.img-container { border: 10px solid crimson; width: 100px; } .img { width: 300px; } lt;div class="img-containergt; lt;img scr="apple.jpg" class="img" /gt; lt;/divgt; И вот что я получаю в браузере: index.html
Я много исследовал, но все еще не понял этого. Почему дочерний элемент (изображение) шире родительского контейнера?
Ответ №1:
вы понимаете, что вы дали изображению ширину 300 пикселей, когда ваш контейнер имеет ширину 100 пикселей, верно? я имею в виду, что вы буквально сделали изображение шире, чем вы сами
вы можете использовать overflow это для решения этой проблемы. дайте overflow:hidden вашему контейнеру, чтобы скрыть все, что не помещается внутри него. или overflow:auto для прокрутки.
Комментарии:
1. Да, но я думал, что он все равно не сможет быть шире, даже если я установлю его вручную. Я ошибаюсь?
2. все не так. если вы хотите, чтобы дочерний элемент помещался внутри контейнера, вы должны установить ширину дочернего элемента меньше или равной ширине родительского элемента. с другой стороны, вы можете дать своему родителю переполнение: скрытое; скрыть все, что не помещается внутри него. или переполнение:автоматическая прокрутка.
3. @ChiefHan Существует свойство CSS под названием «переполнение», которое вы можете установить на что-то вроде скрытого , прокрутки или автоматического , чтобы получать разные результаты, когда дочерний элемент больше родительского элемента. Но CSS никогда не помешает вам сделать дочерний элемент больше родительского. Именно поэтому рекомендуется использовать значения, основанные на процентах, или ширину/высоту.