javascript - 使用 jQuery 内联附加图像

Question

我有一个图像列表，其中 src 从数据库中获取。它为列表中的每条记录创建一个图像并将其附加到一个 div。

图像可以正常且正确地显示，但问题是所有图像都显示在彼此下方。我希望图像彼此相邻显示(内联)。

这是我的:

这里我将我的图像附加到 div:

function OnSuccess(response) {
        var clb = response.d;
        $(clb).each(function () {
            $('#myDiv').append('<img src=' + this.clubLogo + ' style="display: inline-block;" class="img-responsive thumbnail"/> ');
        });
    }

HTML:

<div class="section-body">
   <div class="row">
      <div class="col-lg-2 col-md-3 col-sm-6 col-xs-12">
         <div id="myDiv">
           <%--Here is where my images get displayed underneath each other--%>
         </div>
      </div>
   </div>
</div>

我已经尝试实现此解决方案，但对我不起作用: Jquery append - Image inline

请协助。谢谢。

Answer 1

<img>默认情况下标签是内联的，所以有些东西正在添加 display:block给他们，以便他们根据您的描述呈现。

要解决这个问题，这应该可行:

使容器 div 成为 flexbox 父级:

class="flex-parent"

在哪里.flex-parent有 CSS 规则:

.flex-parent{display:flex;}

在下面的代码示例中，我输入了 display:block在 .thumbnail 上类 - 使图像出现在一列中。离开.thumbnail像那样，我添加了 flex-parent将类(随意命名)放到容器 div 上，然后 Le Voila! 找到了真正的幸福。

.thumbnail{display:block;}

.flex-parent{display:flex;}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div id="myDiv" class="flex-parent">
  <img src="http://placekitten.com/g/50/50" class="img-responsive thumbnail"/>
  <img src="http://placekitten.com/g/50/50" class="img-responsive thumbnail"/>
  <img src="http://placekitten.com/g/50/50" class="img-responsive thumbnail"/>
  <img src="http://placekitten.com/g/50/50" class="img-responsive thumbnail"/>
  <img src="http://placekitten.com/g/50/50" class="img-responsive thumbnail"/>
  <img src="http://placekitten.com/g/50/50" class="img-responsive thumbnail"/>
  <img src="http://placekitten.com/g/50/50" class="img-responsive thumbnail"/>
</div>

---

Flexbox 真的 super 简单。它需要两件事:

1. 父容器(例如 DIV、section、aside、p 等)

2. 一个或多个子元素(例如div、p、img等)

您在父项上打开 flexbox:display:flex;

然后，有各种开关。有些是在父级上设置的(如 justify-content 的情况)，但其他可能是在元素上设置的(如 flex-grow:1 )

YouTube tutorial - fast-paced and best-of-breed

Here is a great cheatsheet用于 Flexbox。

观看教程，在 20 分钟内，您生活中遇到的所有问题都将得到解决——您就会了解 flexbox。

_{附言我与该视频或其主持人没有任何关系 - 我很幸运地发现了它，现在将它传递出去。}

请注意，从 Bootstrap3 到 Bootstrap4 的主要变化是围绕 flexbox 重新设计核心网格系统。这让您了解 flexbox 的重要性。