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

我想您只是忘记了src属性的双引号。

您的代码：

$('#myDiv').append('<img src=' + this.clubLogo + ' ...

应如何显示：

$('#myDiv').append('<img src="' + this.clubLogo + '" ...

Answer 2

尝试添加到您的代码中

<div id="myDiv" style="display: flex; flex-wrap: wrap;">

和js

$('#myDiv').append('<img src=' + this.clubLogo + ' style="width: 50%;" class="img-responsive thumbnail"/> ');

代替

$('#myDiv').append('<img src=' + this.clubLogo + ' style="display: inline-block;" class="img-responsive thumbnail"/> ');

如果可行，将内联样式移动到css文件。

Answer 3

<img>标签默认是内联的，因此要在它们中添加一个display:block，以便它们根据您的描述进行呈现。

要解决此问题，这应该可行：

使容器div成为flexbox父级：

class="flex-parent"

.flex-parent具有CSS规则的地方：

.flex-parent{display:flex;}

在下面的代码示例中，我将display:block放在.thumbnail类上-使图像显示在列中。像这样.thumbnail，我在容器div上添加了flex-parent类（随便叫什么），然后 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真的非常简单。它需要两件事：

父容器（例如DIV，剖面，侧面，p等）
一个或多个子元素（例如div，p，img等）

您在父级上打开弹性框：display:flex;

然后，有各种开关。有些设置在父项上（例如justify-content），而有些设置在项上（例如flex-grow:1）

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

Here is a great cheatsheet for Flexbox。

观看本教程，您将在20分钟内解决生活中遇到的所有问题-并且您将了解flexbox。

_{P.S。我与该视频或其演示者没有任何联系-很幸运，我发现了它，现在将其传递了。}

请注意，从Bootstrap3到Bootstrap4的主要更改是重新设计了围绕Flexbox的核心网格系统。。这使您了解了Flexbox的重要性。

使用jQuery内联附加图像

3 个答案: