1

我以前设计过网站，但这次我完全不知所措。在过去的几个小时里，我一直在用这个来敲打我的头（这里不夸张）。我需要一个带有白色背景的父 DIV 来包装动态生成的（通过 php 或 ajax 调用）DIV。这样我就可以根据需要创建设计（图像之间的 1px 空白）。

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

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

问题：div.images没有宽度并display:inline-block扩展到他父母的宽度。以我在 CSS 方面的经验，带有 inline-block 的 DIV 应该环绕包含元素，但事实并非如此。

尝试：删除宽度div.items，一个一个删除所有css，仅将有问题的部分放在另一个文件中并尝试使其工作（有时会，有时不会）。

预期结果：用 1px 的空间和 1px 的白色边框围绕容器div.images包装所有内容（实际上是用 1px 填充来伪造边框）。div.imgContainerdiv.imgContainerdiv.images

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

错误：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

4

2 回答 2

0

我用 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');
});
于 2013-02-19T13:42:07.790 回答
-1

我实现了一个奇怪的破解：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>

于 2013-02-19T12:27:55.797 回答