css - 内联 block div 元素不环绕其他内联 block 元素

Question

我以前设计过网站样式，但这次我完全不知所措。在过去的几个小时里，我一直在为此苦苦思索(这里毫不夸张)。我需要一个带有白色背景的父 DIV 来包装动态生成的(通过 php 或 ajax 调用)DIV。这样我就可以根据需要创 build 计(图像之间有 1 像素的空白)。

这是我设置的一个 jsFiddle，如果有人有时间也看看它:http://jsfiddle.net/5eJjy/

这是一个“实时”版本:http://developer.sodobniinternet.eu/es-photo/

问题:没有宽度的 div.images 和 display:inline-block 扩展到他父级的宽度。根据我使用 CSS 的经验，带有内联 block 的 DIV 应该环绕包含元素，但事实并非如此。

尝试过:删除 div.items 的宽度，一个一个地删除所有 css，只将有问题的部分放在另一个文件中并尝试使其工作(有时可以，有时不能't).

预期结果:div.images 将所有 div.imgContainer 包裹起来，div.imgContainer 之间有 1px 的空间， 周围有 1px 的白色边框>div.images 容器(实际上用 1px 填充伪造边框)。

我已经创建了错误的屏幕截图以及我想要它的方式:

错误:http://shrani.si/f/2r/d0/1K6RkAyH/no.jpg

预计:http://shrani.si/f/3F/pw/Egu9OES/expected.jpg

感谢您的宝贵时间和帮助。

编辑:我已经更新了预期结果。我发现我没写好。

解决方案:http://jsfiddle.net/ebF8q/

我删除了 div.images，设置为父 div font-size:0(以删除不需要的空间)，到 div.imgContainer 我添加/更新了 border: 1px solid #fff; margin: 0 -1px -1px 0px; 我得到了想要的结果。截图:http://shrani.si/f/2C/pi/2T0FUvWD/done.jpg

Answer 1

我用 CSS 尝试了一些东西，但无法让它工作。这是一种仅使用 JS 的方法:

$(window).load(function () {
    $('.items').css('width', ($('#content').innerWidth() - (parseInt($('.filters').width()) + parseInt($('.filters').css('padding-left')) + parseInt($('.filters').css('padding-right')) + parseInt($('.filters').css('margin-left')) + parseInt($('.filters').css('margin-right'))) - 2) + 'px');
});
$(window).resize(function () {
    // original container size
    var consize = $('#content').innerWidth() - (parseInt($('.filters').width()) + parseInt($('.filters').css('padding-left')) + parseInt($('.filters').css('padding-right')) + parseInt($('.filters').css('margin-left')) + parseInt($('.filters').css('margin-right'))) - 2;
    // size of single contained image
    var imgsize = $('.imgContainer').outerWidth(true);
    // difference of full (max) and wanted size
    var margin = consize % imgsize;
    // set size/margin, so that wraps max number of images
    $('.items').css('width', (consize - margin + 1) + 'px');
    $('.items').css('margin-right', margin + 'px');
});