我有一堆图像想要使用 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)
});
这可行，但我需要根据浏览器窗口大小垂直或水平显示图像，具体取决于浏览器上有多少空间。有人可以告诉我如何做到这一点吗？
如果可以指定图像的宽度，则可以将它们浮动在块级元素中。
例如：
<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/ http://jsfiddle.net/audetwebdesign/8FEeM/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
