嵌入塊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元素不會環繞其他嵌入塊元素

回答

相關問題