Проблема с полями CSS с плавающими динамическими элементами в центрированном элементе div

Question

Я кодирую тему Wordpress, и у меня возникла проблема с отображением 5 динамических миниатюр постов рядом друг с другом (слева направо) с правым полем 20 пикселей в центрированном элементе div.

вот ссылка на страницу: http://www.lesfourchettes.net/info (проблема возникает, когда вы нажимаете «Les Prèfs» в верхней панели навигации: верхнее меню и нижний контент перемещаются на 10 пикселей влево.)

Вот проблема:

• сайт имеет ширину 960 пикселей и центрирован. (#Wrapper)

• 5 динамически сгенерированных миниатюр постов имеют ширину 176px с правым полем 20px каждая. (# .prefs-превью)

• Я выбираю эти размеры для миниатюр, думая, что у меня будет 5 миниатюр и 4 поля между ними, что в сумме составит 960 пикселей.

• но реальность такова, что последняя миниатюра каждой строки также имеет отступ в 20 пикселей, и, следовательно, все это в сумме составляет 980 пикселей (на 20 пикселей шире, чем сайт).

• единственное решение, которое я нашел для отображения 5 миниатюр в строке, - это присвоение ширине в 980 пикселей миниатюре div (#prefs).

• однако это, кажется, вызывает проблему с центрированием остальной части контента, которая больше не центрируется с шириной сайта 960px, а с шириной эскиза 980px.

• поэтому всякий раз, когда я нажимаю «lesprefs» для отображения миниатюр (используя небольшую функцию jquery), весь контент перемещается в 10 пикселей слева.

Все это немного сложно объяснить. Но я чувствую, что, безусловно, есть простое решение CSS моей проблемы Возможно, что-то связанное со свойством overflow, свойством display или чем-то в этом роде ... Я просто недостаточно хорош в CSS, чтобы определить решение и мою проблему настолько специфической, что я не нашел ответа в Интернете.

Я чувствую, что проблема заключается в этих строках CSS:

#wrapper {
width: 960px;
height: auto;
margin: 0 auto 0 auto;
}

#prefs {
width: 980px;
height: 390px;
margin: 69px 0 0 0;
}

.prefs-thumbs {
position: relative;
float: left;
margin: 0 20px 20px 0;
}

Любая помощь будет принята с благодарностью. Ура!

Answer 1

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

Мое предпочтительное решение этой проблемы - всегда показывать горизонтальную полосу прокрутки со следующим CSS (работает во всех современных браузерах):

html { overflow-y: scroll; }

Answer 2

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

Вам необходимо удалить правое поле с последнего элемента в каждой строке.

Так что либо установите класс для последнего элемента, который переопределяет поле с помощью marign-right:0, либо ( для современных браузеров ), сделайте это исключительно в CSS с

.prefs-thumbs:nth-child(5n+1){
    margin-right:0;
}

ссылка: http://www.w3.org/TR/selectors/#nth-child-pseudo

Вам также необходимо удалить границу с изображениями по мере их добавления, и вместо 176 пикселей каждое из ваших изображений занимает 180 пикселей ( оно имеет 2-пиксельную рамку вокруг него )

Итак, поправьте сначала свою математику ..

Проблема с перемещением содержимого заключается в том, что полосы прокрутки появляются, когда содержимое превышает высоту страницы (, как и ожидалось ). Одним из решений является сохранение видимости вертикальной полосы прокрутки alwats, как предлагает @wsanville в своем ответе.

Answer 3

Я вижу, что выравнивание по центру смещается влево из-за вертикальной прокрутки, которая появляется с правой стороны страницы.