Intereting Posts
Отзывчивый макет вне строки в FF и IE PHP-код внутри html закомментирован Методы вызова в модулях RequireJs из HTML-элементов, таких как onclick-обработчики Как использовать окно пользовательского поиска для пользовательского поиска Google? Flexbox или Column CSS для позиционирования элементов, подобных этому Как заменить блок HTML на другой блок HTML с помощью jQuery Разделите строку на каждый атрибут тега и сохраните их в редакторе HTML-кода Visual Studio Изменение цвета элемента hr Фото grid, как новый дизайн flickr Справка Курсор не работает в браузере Firefox Как выделить столбец в таблице html при нажатии с помощью js или jquery? на движущемся элементе не срабатывают события мыши Создание Div относительно другого содержимого на странице В IE11 с использованием псевдоэлемента :: before и display: table-cell и glyphicons contens обычно не отображаются Существует ли новая стандартная ширина веб-страницы? Сколько пикселей?

Столбец Webkit CSS3 добавляет дополнительное дополнение к контейнеру.

Я создал несколько столбцов CSS3 для галереи изображений, которая хорошо выглядит в Firefox.

HTML:

css:

 #featured { width: 730px; padding: 20px; -webkit-column-count: 2; -webkit-column-gap: 10px; -webkit-column-fill: balance; -moz-column-count: 2; -moz-column-gap: 10px; -moz-column-fill: balance; column-count: 2; column-gap: 10px; column-fill: balance; background: #7d90a5; } article { width: 300px; display: block; background: #344252; -webkit-column-break-inside: avoid; -moz-column-break-inside: avoid; column-break-inside: avoid; padding: 10px; width: 335px; margin-bottom: 20px; } article img{ width: 335px; display: block; } 

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

которое я понятия не имею, чтобы исправить это. Я искал в Интернете и нашел этот stream, но я не уверен, что это та же проблема.

Проверьте эту ссылку на скрипку и попробуйте открыть ее с помощью Chrome и Firefox.

Попробуйте этот CSS

 #featured { overflow:hidden; } 

Быстрое исправление, нацеленное только на -webkit-браузеры

 #featured { -webkit-margin-after: -110px; } 

Вы используете margin-bottom в каждой статье 20px и заполняете контейнер в 20px,

Смотрите эту скрипку

 #featured { padding: 20px 20px 0 20px ...} 

Если я правильно понимаю вопрос, попробуйте …

 #featured{ padding: 20px 20px 0 20px; ... } 

а также

 #article{ display: inline-block; ... } 

Альтернатива использованию {display: inline-block}

 article { -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; } 

sourced from: Аналогичная проблема , CSS-трюки

Не используйте с column-break-inside: avoid; свойств column-break-inside: avoid; любой margin или padding , border только margin-bottom , я думаю, это лучшее решение для этой проблемы. http://jsfiddle.net/SdtP5/3

Если я правильно понимаю вопрос, вы можете попробовать добавить padding:0 или даже что-то вроде padding:-10px; или аналогично сгустителю

Вы padding: 10px; который также добавляет отступы на дно. Используйте это, чтобы удалить дополнение внизу:

 padding: 10px 10px 0px 10px; 

Это просто белое пространство!

 section {font-size:0} article {font-size: 1rem} /* if necessery */