Question

之前我设计了网站，但这次我完全失去了。我最近几个小时都在敲打这个问题（这里毫不夸张）。我需要一个带有白色背景的父DIV来动态生成（通过php或ajax调用）DIV。通过这种方式，我可以根据需要创建设计（图像之间的空白区域为1px）。

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

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

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

尝试：删除div.items的宽度，逐个删除所有css，只将有问题的部分放在另一个文件中并尝试使其正常工作（有时它确实有效，有时则不然）。< / p>

预期结果：div.images将所有div.imgContainer包裹在div.imgContainer和div.images容器周围的1px白色边框之间的1px空格（实际上使用1px填充伪装边框）。< / p>

我创建了什么错误的屏幕截图，我怎么想要它：

错误：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');
});

Answer 2

我遇到了一个奇怪的黑客： http://jsfiddle.net/CGPBM/

删除div.images背景，为div.imgContainer添加边框并将边距设置为-1px -1px

.images {    
    font-size: 0px;
}

.imgContainer {
    max-width: 250px;
    max-height: 188px;
    position: relative;
    display: inline-block;
    border: 1px solid white;
    margin: -1px -1px;
}

但它必须在几个分辨率上测试（JSfiddle是如此之小......）

我也将它应用到您的网站，并且您需要摆脱它们之间的空白区域 <div class="imgContainer"></div><div class="imgContainer"></div><div class="imgContainer"></div>

内联块div元素不会包围其他内联块元素

2 个答案: