循环中添加的元素的jQuery宽度答案

【问题标题】：jQuery width of element added in loop循环中添加的元素的jQuery宽度
【发布时间】：2015-08-19 17:35:24
【问题描述】：

我想让包装器 div 中的所有图像彼此相邻。我已将图像的高度设置为 100%，将宽度设置为自动、绝对位置、顶部：0。我需要制作一个 jQuery 代码来计算图像的宽度并将第二个图像的左侧位置设置为第一个的宽度图片。所有图像将具有相同的宽度。

我有这个不工作的、不完整的代码，我与之抗争

$('.page-wrap .portfolio-item').each(function(i){
    var width = $('.portfolio-item').width();
        $(this)
        .animate({left: width});
    });

小提琴：http://jsfiddle.net/en9ub923/

【问题讨论】：

到目前为止你尝试了什么？我也需要很多东西，但是......）
@kmsdev 我认为把它放在这里没用，因为它无关紧要。我什至坚持获取图像的宽度。
我们可以（希望）从代码方面为您提供帮助，但我们还需要了解您在这方面所做的工作。有总比没有好。
我想知道，为什么你必须用jQuery计算宽度，你可以在css中使用浮点数，它会自动将它放在元素之后
如果您可以发布更多代码或 jsfiddle，我们可以提供更多帮助。你可能想看看 flexbox。 css-tricks.com/snippets/css/a-guide-to-flexbox

标签： jquery html css

【解决方案1】：

仅使用 css 解决方案：http://jsfiddle.net/se3bjch4/1/

为什么不使用你的 img css：

display: inline-block;

或：

float:left;

！？

或者将您的代码更改为适合您的方法：

var all_images_width = 0;
$('.page-wrap .portfolio-item').each(function(i, val){
    var width = $('.portfolio-item').width();
    $(this).animate({left: all_images_width});
    all_images_width += width;
});

【讨论】：

因为我希望所有图像都留在同一行，而不是放在另一行
@RazvanCuceu 哦，您是否尝试在页面调整大小并使其响应时做到这一点？
已编辑以支持不同宽度的图像...在每次运行循环之前重置 all_images_width 变量。
您可以在 images 父元素上使用 css 属性 white-space: nowrap; 来防止它们换行到下一行。如果您使用的是绝对定位，则不适用。
@RazvanCuceu 在这里你只使用引导程序的网格系统，在 css 中这是这种事情的首选：github.com/zirafa/bootstrap-grid-only

【解决方案2】：

更新

如果您需要能够滚动浏览内容，可以执行以下操作（请参阅updated jsfiddle）：

输出：

HTML：

<div class="overflow-container">
    <main>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </main>
</div>

SCSS：

main {
    background: lightblue;
    display: flex;
    flex-wrap: nowrap;
    height: 60px;
    justify-content: space-between;
    padding: 2px;
    width: 100vw;

    div {
        background: lightgreen;
        flex-grow: 1;
        height: 60px;

        &:not(:last-child) {
            margin-right: 2px;
        }
    }
}

.overflow-container {
    height: 64px;
    width: 300px;
    overflow-x: scroll;
}

旧答案

如果您愿意不支持某些较旧的浏览器（好吧，实际上只需使用 modernizr，您不必担心），您可以尝试 CSS flex-box（参见 jsfiddle）：

SCSS：

main {
    background: lightblue;
    display: flex;
    flex-wrap: nowrap; // keep the elements on the same line
    height: 60px;
    justify-content: space-between;
    padding: 2px;
    width: 100%;
}

div {
    background: lightgreen;
    flex-grow: 1; // every element will take up equal space
    height: 60px;

    &:not(:last-child) {
        margin-right: 2px;
    }
}

输出：

孩子的宽度适合容器（孩子可以是任何东西，包括imgs。）

【讨论】：

谢谢，但它必须从右边的窗口出去，因为我会有几十张图片。
@RazvanCuceu，你可以在外面再添加一个固定宽度的容器，然后设置overflow-x: scroll。