Question

我打算在Web应用程序中显示如下内容：

此刻我的水平图像与垂直图像不在同一水平，因此在文本框和水平图像之间出现了很大的空白。

我的代码：

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

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

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

如何在同一行div上插入2张图像和1个文本框

2 个答案: