Неравномерные изображения на основе флюида/процентной основы

Question

У меня есть этот код: http://jsfiddle.net/VV9qJ/, но по какой-то причине я не могу исправить ошибки в пикселях, вызванные изображениями. В основном вы заметите, что некоторые из изображений имеют пиксель или два белых промежутка вокруг некоторых из них, в то время как некоторые нет, особенно при изменении размера окна браузера. Каждый браузер делает белые пробелы немного по-другому.

В моем макете не должно быть пробелов, и все содержимое должно быть плотно прижато друг к другу, включая окно браузера.

Есть ли надежный способ обеспечения того, чтобы изображения постоянно затягивались друг против друга в разных браузерах? Возможно, jQuery? Я проделал много работы в Google, но ничего не нашел.

Все еще не нашли исправления для этого. Мне трудно поверить, что решение не там, может ли кто-нибудь помочь вообще?

Answer 1

Если я не понимаю, что не так, я не могу воспроизвести проблему с белыми пробелами, но похоже, что это может быть проблема с запасом или дополнением.

div.smallLink { 
    display: inline-block; 
    font-size: 100%; 
    margin: 0; 
    padding: 0; 
    width: 50%; 
} 

Вы также, возможно, придется установить поля и отступы по IMG теги в .smallLink 0.

Answer 2

Добавьте следующий код под groupoflink DIV

письмо-интервал: -4px;

http://jsfiddle.net/VV9qJ/11/

Answer 3

Ваша проблема является width:100% на DIV с классом content ..

в то время как ДИВ подшипник класс banner также установлен на 100% ширину занимает полный 100% пространства, но при ваше разбиение на 100% на 50% + 50% происходит в том, что его разделение на 100% ширину говорит - 500 на 250 + 250 для вас. Для деления происходит правильно только тогда, когда ширина, которую занимает ее родительская (с ее динамической), равна EVEN NUMBER .. т. е. 2 (n) ..

еще раз, 50% -ное разделение не происходит должным образом, скажем, что 501 - это пространство, которое означает, что div со 100-процентной шириной займет полное пространство, которое составляет 501, - но дочерний div с 50-процентной шириной получит 250px и 250px оставив позади этого `1px разрыв, который ваш замечая !! ..

Для удаления пустого пространства дают background-color, так что вы можете игнорировать 1px белое пространство, которое ползает вверх !!

Это не будет лучший способ преодолеть это - должно быть CSS путь, который я не могу думать прямо сейчас .. так, вот решение JS ..

function load(){ 
var largelink = document.getElementById("largelink"); 
largelink.nextSibling.style.width = largelink.parentNode.offsetWidth-largelink.offsetWidth + "px"; 
} 
window.onload = load; 
window.resize = load;​ 

я.e, Parent - если 501 и 1-й ребенок с 50% будут 250, то второй ребенок будет равен 501-250 + "px"

Отредактировано только 1 комплект вашего HTML (вы должны сделать то же самое для остальных) - изменено, чтобы получить идентификатор родителя (15 его 501) и largelin (если его 501 - это будет 250)

<div id="largeLink" class="largeLink"> 

Havnt тестировал .. надеюсь, что он работает ..