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

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

0 голосов
/ 05 марта 2019

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

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

Мой код: 

<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>

Ответы [ 2 ]

1 голос
/ 05 марта 2019

Размещение горизонтального изображения на том же уровне, что и текст, должно сделать это.Вы упомянули, что вы этого не сделали.Есть ли причина?Вы можете изменить 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>
0 голосов
/ 05 марта 2019 

    .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>
...