嵌入块div元素不会环绕其他嵌入块元素

我之前设计过网站，但是这次我完全丢失了网站。在过去的几个小时里，我一直在嘲笑我的头（这里没有夸张）。我需要一个白色背景的父DIV动态生成（通过PHP或AJAX调用）DIV的包装。这样我就可以创建我想要的设计（图像之间为1px的空白）。嵌入块div元素不会环绕其他嵌入块元素

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

这里是一个“活”的版本：http://developer.sodobniinternet.eu/es-photo/

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

试过：删除宽度为div.items，逐个删除所有css，只将具有问题的部分放在另一个文件中，并试图使其工作（有时它确实有时不会）。

预期结果：div.images包裹所有div.imgContainer有1px的空间div.imgContainer和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

来源

2013-02-19 Kristjan O.

为什么它需要是内联块？将它作为块的默认显示似乎工作正常。你的生活网站看起来很好。 – 2013-02-19 12:30:57

在'div.images'上？我尝试了很多次，不行。也许你得到了正确的解决方案，但不是好的。请查看屏幕截图附件。 – 2013-02-19 12:45:17

-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-19 12:27:55

我没有看到原始示例和您的示例之间的区别。顺便说一句，原来的更好，你的闪烁，然后调整大小。 – Morpheus 2013-02-19 12:36:39

我也没有，但它给了我一个想法，或者我应该说，一种新的方法。 – 2013-02-19 12:55:18

我尝试了一些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-19 13:42:07 marsze

嵌入块div元素不会环绕其他嵌入块元素

回答

相关问题