Как вставить 2 изображения и 1 текстовое поле в одну строку div

#html #css #web-applications #formatting #frontend

#HTML #css #веб-приложения #форматирование #интерфейс

Вопрос:

Я имею в виду отобразить что-то подобное в моем веб-приложении:

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

Мой код:

 <div class="row">
    <div class="col-md-7">
        <p class="paragrafos">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Consequat mauris nunc congue nisi vitae suscipit. Egestas dui id ornare arcu odio ut sem nulla. Vulputate enim nulla aliquet.
        </p> 
    </div>
    <div class="col-md-5"> <img id="img_1" src="app/1.jpg"></div>
    <div class="col-md-5"> <img id="img_2" src="app/2.jpeg"></div>
</div>

1. вы пробовали что-нибудь с css?

2. @godfather просто такие вещи, как размер изображения. Я думал, что margin-* решит проблему, но это не так

3. вчера, когда вы опубликовали это, я предпринял попытку закрыть позиции css, но я не знаю, поможет ли это вам

4. если вы сможете опубликовать свой css, вам будет легче помочь

Ответ №1:

Горизонтальное изображение должно располагаться на том же уровне, что и текст. Вы упомянули, что вы этого не делали. Есть ли причина? Можете ли вы изменить HTML?

 <div class="row">
    <div class="col-md-7">
        <p class="paragrafos">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Consequat mauris nunc congue nisi vitae suscipit. Egestas dui id ornare arcu odio ut sem nulla. Vulputate enim nulla aliquet.
        </p> 
        <img id="img_1" src="app/1.jpg">
    </div>
    <div class="col-md-5"> <img id="img_2" src="app/2.jpeg"></div>
</div>

1. Это сделало свое дело! Я просто собираюсь изменить некоторые поля и размер изображения. Большое спасибо! Я не делал этого, потому что не думал об этом!

2. Отлично, я рад, что это помогло!

Ответ №2:

     .row {
        display: flex;
        flex-direction: column;
    }

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

</head>

<body>
<div class="row "  >
    <div class="col-md-7">
        <p class="paragrafos">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Consequat mauris nunc congue nisi vitae suscipit. Egestas dui id ornare arcu odio ut sem nulla. Vulputate enim nulla aliquet.
        </p>
    </div>
    <div class="col-md-5"> <img id="img_1" src="app/1.jpg"></div>
    <div class="col-md-5"> <img id="img_2" src="app/2.jpeg"></div>
</div>

</body>
</html>