Блог

Главная - Вопросы по программированию - CSS: Изображение отображается за пределами границ раздела

CSS: Изображение отображается за пределами границ раздела

#css

Вопрос:

Я пытаюсь создать div, содержащий изображение слева и другое содержимое, например текст в центре. Когда я добавляю границу в div, изображение кажется внешним.

введите описание изображения здесь

   <div style="padding: 20px;">
  <div style="border: solid black 2px">
    <img width="100px" height="150px" style="float: left;" src="https://karateinthewoodlands.com/wp-content/uploads/2017/09/default-user-image.png">
    <p>Username</p>
    <p>User Role</p>
  </div>
</div>

Это из-за свойства float?

Ответ №1:

Если вы используете flex вместо float div, он останется того же размера, что и изображение.

   <div style="padding: 20px;">
  <div style="border: solid black 2px; display:flex">
    <img width="100px" height="150px" src="https://karateinthewoodlands.com/wp-content/uploads/2017/09/default-user-image.png">
    <div>
      <p>Username</p>
      <p>User Role</p>
    </div>
  </div>
</div>

Ответ №2:

Я бы избегал float . Используйте flex вместо этого

 <div style="padding: 20px;">
  <div style="border: solid black 2px; display: flex;">
    <img width="100px" height="150px" src="https://karateinthewoodlands.com/wp-content/uploads/2017/09/default-user-image.png">
    <div>
        <p>Username</p>
        <p>User Role</p>
    </div>
  </div>
</div>

Ответ №3:

Да, это из-за поплавка. Float больше не рекомендуется из-за этих проблем иногда. Вы можете исправить это с помощью overflow: auto или clear: both в контейнере, чтобы устранить эту проблему.

 <div style="padding: 20px;">
  <div style="border: solid black 2px; overflow: auto">
    <img width="100px" height="150px" style="float: left;" src="https://karateinthewoodlands.com/wp-content/uploads/2017/09/default-user-image.png">
    <p>Username</p>
    <p>User Role</p>
  </div>
</div>

Ответ №4:

Да, это из-за свойства float. Что вы можете сделать, так это

 <div style="border: solid black 2px; overflow:hidden;">
  <img width="100px" style="height:auto;float: left;margin-right: 10px;" src="https://karateinthewoodlands.com/wp-content/uploads/2017/09/default-user-image.png">
  <p>Username</p>
  <p>User Role</p>
</div>

Вам нужно присвоить родительское Overflow: hidden; свойство div и удалить высоту изображения. Вы не должны фиксировать высоту изображения, вместо этого вы должны указать свойство максимальной высоты, которое не позволит изображению выходить за пределы максимальной высоты.
Также я добавил height:auto;margin-right: 10px; в тег img, который вы можете отредактировать или удалить, если в этом нет необходимости.

Метки: