Как получить изображение в DIV полностью, не проливая его на бок?

Question

Я пытаюсь сделать горизонтальную карту по всей части экрана, и пока все выглядит именно так, как я хочу, за исключением того, что изображение отображается только частично на границе карты, примерно на полпути, и закрывает следующую карту. Я пытаюсь заставить это сидеть равномерно в пределах карты. Я включил фотографию того, что я имею в виду, и это код, который я использую. Пожалуйста, дайте мне знать, если вам нужно увидеть html.

Редактировать: я добавил html

.cardcontainer {
    border: white solid 1px;
    padding-left: 30px;
    padding-bottom: 30px;
    margin: 20px;
    background-color: rgb(7, 16, 31);
}

.cardheading {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: white;
    position: relative;
}

.cardpara {
    font-family: Arial, Helvetica, sans-serif;
    color: rgb(117, 117, 117);
    position: relative;
    padding-bottom: 25px;
    padding-right: 25px;
    font-style: italic;
    width: auto;
}

.cardimg {
    width: 130px;
    height: 130px;
    float: right;
    padding:0;
    margin-right: 30px;
}

.learnmorebutton {
    border: none;
    color: white;
    padding: 10px 15px;
    text-align: center;
    font-size: 16px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    cursor: pointer;
    margin: 0 auto;
    border-radius: 15px;
    animation: fade 10s linear infinite alternate;
    text-decoration: none;
}

html:

<div class="cardcontainer">
                    <h1 class="cardheading">placeholder<i class="location">placeholder</i></h1>
                    <p class="cardpara">placeholder</p>
                    <a class="learnmorebutton" href="#" target="_blank">Learn More</a>
                    <img class="cardimg" src="#">
                </div>

Answer 1

Мне удалось это исправить, я использовал overflow:auto, затем поставил <img> перед <p> и изменил его на элемент <span>, затем поиграл с отступами и переносами строк и сумел получить мой resault. Спасибо EternalHour:)

Answer 2

Основным c ответом на ваш вопрос является то, что вам нужно очистить поплавок на изображении, добавив свойство overflow к родителю. Тем не менее, содержимое в пределах .cardpara будет уменьшать изображение. Не уверен, что это именно то, что вам нужно.

Если вы хотите, чтобы изображение рядом с содержимым в <p> и текст оборачивались вокруг него, переместите тег <img> до <p> в разметке.

.cardcontainer {
    border: white solid 1px;
    padding-left: 30px;
    padding-bottom: 30px;
    margin: 20px;
    background-color: rgb(7, 16, 31);
    overflow: auto;
}

.cardheading {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: white;
    position: relative;
}

.cardpara {
    font-family: Arial, Helvetica, sans-serif;
    color: rgb(117, 117, 117);
    position: relative;
    padding-bottom: 25px;
    padding-right: 25px;
    font-style: italic;
    width: auto;
}

.cardimg {
    width: 130px;
    height: 130px;
    float: right;
    padding:0;
    margin-right: 30px;
}

.learnmorebutton {
    border: none;
    color: white;
    padding: 10px 15px;
    text-align: center;
    font-size: 16px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    cursor: pointer;
    margin: 0 auto;
    border-radius: 15px;
    animation: fade 10s linear infinite alternate;
    text-decoration: none;
}

<div class="cardcontainer">
  <h1 class="cardheading">placeholder<i class="location">placeholder</i></h1>
  <p class="cardpara">placeholder</p>
  <a class="learnmorebutton" href="#" target="_blank">Learn More</a>
  <img class="cardimg" src="https://via.placeholder.com/130?text=PLACEHOLDER">
</div>