Как я могу выровнять изображения в нижнем левом и правом углах div без абсолютного позиционирования? [закрыто]

Вопрос или проблема

#m3{
    grid-row: 3;
    grid-column: 3;
    border-style: solid;
    position:relative;
    padding: 10px;
    
}

#m4{
    grid-row: 3;
    grid-column: 4;
    border-style: solid;
    position:relative;
    padding: 10px;
}


.bl{
    float: left;
    width: 25%;
    height: 25%;
    padding: 5px;
}

.br{
    float: right;
    width: 25%;
    height: 25%;
    padding: 5px;
}

Ответ или решение

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

1. Использование Flexbox

Хотя вы упомянули, что не хотите использовать Flexbox из-за проблем с обертыванием текста, возможно, стоит рассмотреть правильную настройку Flexbox, чтобы он работал надлежащим образом.

<div class="container">
    <div class="content">
        <p>Ваш текст здесь...</p>
    </div>
    <div class="bl">
        <img src="image-left.jpg" alt="Left Image">
    </div>
    <div class="br">
        <img src="image-right.jpg" alt="Right Image">
    </div>
</div>

.container {
    display: flex;
    flex-direction: column; /* Расположение дочерних элементов по вертикали */
    padding: 10px;
    border: 1px solid #000;
}

.content {
    flex: 1; /* Позволяет этому блоку занимать всё доступное пространство */
}

.bl {
    align-self: flex-start; /* Сдвигаем слева */
}

.br {
    align-self: flex-end; /* Сдвигаем справа */
}

img {
    max-width: 100%; /* Адаптивность изображений */
    height: auto; 
}

2. Использование CSS Grid

Если вам необходимо более сложное расположение элементов, CSS Grid может быть хорошим выбором.

<div class="grid-container">
    <div class="content">
        <p>Ваш текст здесь...</p>
    </div>
    <div class="bl">
        <img src="image-left.jpg" alt="Left Image">
    </div>
    <div class="br">
        <img src="image-right.jpg" alt="Right Image">
    </div>
</div>

.grid-container {
    display: grid;
    grid-template-rows: 1fr auto; /* Изменяем строки: текст занимает всё пространство, а изображения меньше */
    padding: 10px;
    border: 1px solid #000;
}

.content {
    grid-row: 1; /* Текст занимает первую строку */
}

.bl {
    grid-row: 2; /* Изображение слева на второй строке */
    justify-self: start; /* Выровнять по началу (влево) */
}

.br {
    grid-row: 2; /* Изображение справа на второй строке */
    justify-self: end; /* Выровнять по концу (вправо) */
}

img {
    max-width: 100%;
    height: auto;
}

3. Использование Float с Clearfix

Если вы предпочитаете использовать float, вы можете применять clearfix, чтобы избежать проблем с обертыванием текста:

<div class="clearfix">
    <div class="content">
        <p>Ваш текст здесь...</p>
    </div>
    <div class="bl">
        <img src="image-left.jpg" alt="Left Image">
    </div>
    <div class="br">
        <img src="image-right.jpg" alt="Right Image">
    </div>
</div>

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

.content {
    overflow: hidden; /* Позволяет тексту помещаться вокруг плавающих элементов */
}

.bl {
    float: left;
    width: 25%;
}

.br {
    float: right;
    width: 25%;
}

img {
    max-width: 100%;
    height: auto;
}

Заключение

Каждый из предложенных методов имеет свои преимущества и подходит для разных сценариев. Выбор подхода зависит от специфики вашего проекта и требований к дизайну. Если вам нужно больше контроля над расположением элементов, CSS Grid — отличный выбор. Если вы предпочитаете более традиционные методы, использование Floats с clearfix может хорошо подойти. Надеюсь, это поможет вам успешно реализовать нужный вам дизайн!