Question

我想要使用jquery显示一堆图像。我有div，我使用jquery根据一些node_id标准填充div。例如，如果node_id是teamA，我会在图像名称中显示具有teamA文本的图像。

找不到工作，问题是当把图像放在html的主体上时，图像会垂直显示，直到主页上没有空格。

根据浏览器窗口的大小，我想做什么，根据浏览器窗口的大小显示图像。例如，如果图像大小为500x500且浏览器窗口宽度为700，我应该能够每行显示一个图像。如果浏览器的宽度为1200，则我的浏览器窗口中每行应该有2个图像。

为了给你一个想法，我已经输入了html和jquery代码来告诉你我在做什么：

<div class="tab-content" id="tabs1">
    <div id="team_A" class="team"></div>
    <div id="team_B" class="team"></div>
    <div id="team_C" class="team"></div>
    <div id="team_D" class="team"></div>
</div>

这是基于jstree node_id显示图像的jquery代码：

var team_A_Img = "http://test.net" + node_id + "-team_A.png";
            $(function () {

                var myImage = new Image();
                $(myImage).load(function () {

                    $("#team_A").html(myImage);

                }).error(function () {

                    $('#team_A').hide();
                }).attr('src', Img_A_Img)

            });

这可以工作，但我需要根据浏览器窗口大小垂直或水平显示图像，具体取决于我在浏览器上有多少空间。有人可以给我一些想法吗？

Answer 1

如果可以指定图像的宽度，则可以将它们浮动到块级元素中。例如：

<div class="tab-content" id="tabs1">
    <div id="team_A" class="team"><img src="http://placehold.it/350x150"></div>
    <div id="team_B" class="team"><img src="http://placehold.it/350x150"></div>
    <div id="team_C" class="team"><img src="http://placehold.it/350x150"></div>
    <div id="team_D" class="team"><img src="http://placehold.it/350x150"></div>
</div>

并使用以下CSS：

.tab-content {
    padding: 0px;
    background-color: yellow;
    overflow: auto;
}
.team {
    float: left;
    margin: 0 5px 5px 0;
}
.team img {
    display: block;
}

要使其工作，请在父容器中设置overflow: auto，尤其是如果要使用背景颜色或图像。

您可以调整浮动元素的边距或填充，以在图像之间创建和设置装订线。

最后，我在图像上使用display: block来处理可能由内联元素产生的任何空白区域。

供参考，请参阅：http://jsfiddle.net/audetwebdesign/8FEeM/

Answer 2

<div class="tab-content" id="tabs1">
<div id="team_A" class="team">
    <img src="http://placehold.it/500x500" />
    <img src="http://placehold.it/500x500" />
    <img src="http://placehold.it/500x500" />
</div>

CSS

.team img{float: left;}

Answer 3

在我的脚本中可以这样做：

$（'。team'）。css（{“width”：$（window）.width（），“height”：“auto”}）;

根据浏览器宽度显示图像

3 个答案: