Элемент div inline-block не обтекает другие элементы встроенного блока

Я создал веб-сайты раньше, но на этот раз я полностью потерял. Я ударяю головой об этом в течение последних двух часов (без преувеличения здесь). Мне нужен родительский DIV с белым фоном для динамического создания (через php или ajax-вызов) DIV. Таким образом, я могу создать дизайн так, как я этого хотел (1px пробел между изображениями).Элемент div inline-block не обтекает другие элементы встроенного блока

Вот 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

Спасибо за ваше время и помощь.

EDIT: Я обновил ожидаемый результат. Я заметил, что я не написал его правильно.

Решение: 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.

Для чего нужен встроенный блок? Похоже, что наличие по умолчанию отображения блока работает нормально.Ваш живой сайт выглядит так, как есть. –

Где, на 'div.images'? Я много раз пробовал, все в порядке. Возможно, у вас есть правильное решение, но это не нормально. Пожалуйста, просмотрите вложения скриншотов. –

-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

Я не вижу разницы между оригинальным примером и вашим. Btw, оригинальный один еще лучше, ваш мерцает, а затем изменяет размер. – Morpheus

Я тоже, но это дало мне идею, или я должен сказать, новый подход. –

Я пробовал некоторые вещи с помощью 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 inline-block не обтекает другие элементы встроенного блока

ответ

Смежные вопросы