Question

我正在尝试使用flask创建一个Web应用程序。在每个图像上，我在下面添加描述符，但对于某些图像，描述比其他图像更长。

下面的图片是我的应用程序运行的示例，但正如您所看到的那样，第三张图片已移位，因此第四张图片现在位于该图片下方全面了解发生了什么：

图片是我想要的尺寸，但你可以看到较长的文字如何移动第3张图片，这是html（警告，我知道很少html）

<!-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

        {{image_names}}
        <hr>
        {% for image_name in image_names %}

            <img class="img-responsive" src=" {{url_for('send_image', filename=image_name)}}">
            <p>Hi</p>
    {% endfor %}

</body>
</html> -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
          integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

</head>
<body>
<div class="container">

    <div class="row">

        <div class="col-lg-12">
            <!-- <h1 class="page-header">Thumbnail Gallery</h1> -->
        </div>
        <!-- {{image_names}} -->
        <hr>

        {% for element in range(size) %}
        <div class="col-lg-3 col-md-4 col-xs-6 thumb">
            <img class="img-responsive" src=" {{url_for('send_image', filename=image_names[element])}}">
            <p> {{test[element]}}</p> 
          <!-- grabbing from a dictionary  <p> {{test2["bob"]}}</p> -->

        </div>
        {% endfor %}
    </div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
        integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
        crossorigin="anonymous"></script>

</body>
</html>

保持图像与烧瓶文本对齐

0 个答案: