Правая граница гибкого элемента div не учитывается в окнах просмотра с узкой шириной
У меня есть изображение и <p> внутри <div class = "man"> с display: flex. Когда я пытаюсь изменить размер окна с помощью инструментов разработчика, margin-right div, окрашенного в оранжевый цвет на изображении, не учитывается, поэтому изображение кажется застрявшим с правой стороны. На данный момент изображение не имеет отступов/полей, но к элементу div применено поле, содержащее как <p>, так и <img>; почему это не уважают?
Скриншот моей проблемы с открытыми инструментами разработки
<!DOCTYPE html>
<html lang = "it">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div.man {
max-width: fit-content;
margin: 20px;
display: flex;
}
div.man p {
margin: 0px;
}
div.man img {
max-width: 450px;
height: auto;
}
@media (max-width: 655px) {
div.man {
flex-direction: column;
}
}
</style>
</head>
<body style = "margin: 0px;">
<div style = "width: fit-content;" class = "man">
<img src = "man2.jpg">
<p>Questo concept restaurant desidera donare ai propri membri un viaggio sensoriale e spirituale tramite le linee
del design, l'attenta scelta dei suoni, l'accurata selezione delle essenze, un'altra riflessione della
funzionalità e della comodità
</p>
</div>
</body>
</html>
спасибо, но я попробовал прямо сейчас с некоторыми значениями ширины img, но у меня та же проблема, поэтому я думаю, что решение другое...
А как насчет img {width: 100%;}?
@ralph.m, спасибо, теперь, кажется, работает. Можете ли вы объяснить мне, почему это редактирование и как это работает? Почему, установив ширину 100%, изображение не заполняет весь контейнер div.man, вместо этого остается место как для изображения, так и даже для <p>?
Ответы 6
В вашем случае изображение имеет свойство max-width. но ширина не ограничена максимум 100% родительского div. попробуйте изменить ширину изображения. тогда проблема решится
Я предполагаю, что когда вы говорите «уважаемый», вы хотите, чтобы изображение занимало всю страницу, но ограничьте его максимальную ширину в 450 пикселей. Если это так, то я добавил width: 100% под div.man img.
Обратите внимание, что при этом поля изображения остаются на месте, но ширина изображения не искажает макет страницы.
div.man {
max-width: fit-content;
margin: 20px;
display: flex;
}
div.man p {
margin: 0px;
}
div.man img {
width: 100%;
max-width: 450px;
height: auto;
}
@media (max-width: 655px) {
div.man {
flex-direction: column;
}
}<!DOCTYPE html>
<html lang = "it">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body style = "margin: 0px;">
<div style = "width: fit-content;" class = "man">
<img src = "https://picsum.photos/600/300">
<p>
Questo concept restaurant desidera donare ai propri membri un viaggio sensoriale e spirituale tramite le linee del design, l'attenta scelta dei suoni, l'accurata selezione delle essenze, un'altra riflessione della funzionalità e della comodità
</p>
</div>
</body>
</html>Да, это решает мою проблему теперь, когда я изменяю размер окна, право поля соблюдается, так что это то, что я ищу. Прежде чем отмечать ответ, можете ли вы объяснить мне, почему устанавливается ширина на 100%? И почему с шириной: 100%; изображение не заполняет весь контейнер div.man? Есть место как для <img>, так и для <p>, и это правильно, но я не понимаю, почему при ширине 100% оно не заполняет все пространство внутри контейнера.
Есть два аспекта. Во-первых, установка ширины на 100 % означает, что изображение заполнит всю ширину содержащего его элемента div, в данном случае класса div man. Другой аспект заключается в том, что максимальная ширина составляет 450 пикселей. Это означает, что если ширина содержащего элемента div превышает 450 пикселей, изображение не будет растягиваться за его пределы.
В CSS поле — это пространство вокруг границы элемента, а отступ — это пространство между границей элемента и содержимым элемента. Если вы устанавливаете поле для элемента полной ширины, вам может потребоваться установить его ширину с помощью Calc, например width:calc(100% - 2x), где x означает поле.
Однако в вашем случае я считаю, что использование отступов — лучший выбор. (Очевидно, используйте его с размером коробки.)
div.man {
max-width: calc(100% - 40px);
margin: 20px;
display: flex;
}
div.man p {
margin: 0px;
}
div.man img {
max-width: 450px;
height: auto;
}
@media (max-width: 655px) {
div.man {
flex-direction: column;
}
}
body{margin:0} <div style = "width: fit-content;" class = "man">
<img src = "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Fronalpstock_big.jpg/1200px-Fronalpstock_big.jpg">
<p>Questo concept restaurant desidera donare ai propri membri un viaggio sensoriale e spirituale tramite le linee
del design, l'attenta scelta dei suoni, l'accurata selezione delle essenze, un'altra riflessione della
funzionalità e della comodità
</p>
</div>Либо установите для ширины div.man значение «auto» или «initial», либо просто удалите встроенное правило «fit-content».
div.man {
width: auto !important;
margin: 20px;
display: flex;
}
div.man p {
margin: 0px;
}
div.man img {
max-width: 450px;
height: auto;
}
@media (max-width: 655px) {
div.man {
flex-direction: column;
}
}<body style = "margin: 0px;">
<div style = "width: fit-content;" class = "man">
<img src = "https://place.dog/450/250">
<p>Questo concept restaurant desidera donare ai propri membri un viaggio sensoriale e spirituale tramite le linee
del design, l'attenta scelta dei suoni, l'accurata selezione delle essenze, un'altra riflessione della
funzionalità e della comodità
</p>
</div>
</body>Это проблема коробочной модели. Свойство маржи работает не так, как многие ожидают. Когда вы применяете поле к элементу, пространство применяется за пределами блочной модели. Вот почему ваше изображение немного смещается за область просмотра — дополнительное поле выталкивает его за пределы блочной модели.
Ширина родительского элемента flex установлена на соответствие контенту, но он также имеет поля в 20 пикселей со всех сторон. Это означает, что модель гибкого родительского блока будет использовать доступное пространство, но не больше, чем максимальное содержимое. В этом случае максимальное содержимое будет равно ширине области просмотра, но поскольку родительский элемент flex имеет поля в 20 пикселей со всех сторон, максимальное содержимое рассчитывается неожиданным образом, что делает его на 20 пикселей шире, чем область просмотра.
Есть несколько способов решить эту проблему. Для наименьшего количества изменений я бы рекомендовал настроить CSS так, чтобы он отражал следующее:
div.man {
max-width: fit-content;
padding: 20px;
gap: 20px;
display: flex;
}
Также обязательно закройте и снова откройте инструменты разработчика Chrome.
Спасибо за помощь, я отметил ваши ответы как правильные. Можете ли вы объяснить мне ключевую разницу между полем и заполнением? Я думаю, что поле «подталкивает» другие элементы вокруг него, вместо этого дополнение создает настоящее «поле», которое даже изменение размера области просмотра не может тормозить, поэтому поле означает внешнее пространство между элементом и другими элементами, а дополнение больше похоже на внутреннее поле. , я прав?
@Stefan9669 Stepan9669 Вот ссылка, которая поможет визуально представить коробочную модель. Вы можете увидеть, где применяются значения отступов и полей: w3schools.com/css/css_boxmodel.asp Я предлагаю провести дополнительные исследования блочной модели и провести собственные эксперименты, поскольку блочная модель является основой CSS.
Я предполагаю, что проблема, с которой вы столкнулись, связана с «max-width:fit-content», который применяется к div.man. При использовании fit-content ширина элемента будет установлена на минимум, необходимый для содержания его содержимого. . Это может привести к тому, что отступ, который вы применили к элементу div, не будет соблюдаться, поскольку содержимое занимает доступное пространство.
Чтобы решить эту проблему, вы можете установить определенную ширину для элемента div.man, а не полагаться на fit-content. Это гарантирует, что поля будут соблюдаться даже при изменении размера окна. Попробуйте использовать этот код, надеюсь, он работает хорошо
<!DOCTYPE html>
<html lang = "it">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div.man {
width: 500px; /* Adjust the width as needed */
margin: 20px;
display: flex;
}
div.man p {
margin: 0px;
}
div.man img {
max-width: 450px;
height: auto;
}
@media (max-width: 655px) {
div.man {
flex-direction: column;
width: auto; /* Reset width for smaller screens */
}
}
</style>
</head>
<body style = "margin: 0px;">
<div class = "man">
<!--replace the img src whatever u want-->
<img src = "https://img.freepik.com/free-photo/young-bearded-man-with-striped-shirt_273609-5677.jpg">
<p>Questo concept restaurant desidera donare ai propri membri un viaggio sensoriale e spirituale tramite le linee
del design, l'attenta scelta dei suoni, l'accurata selezione delle essenze, un'altra riflessione della
funzionalità e della comodità
</p>
</div>
</body>
</html>
вы не указали ширину изображения (только максимальную ширину), поэтому я предполагаю, что оно переполнено