Ответ 1
Попробуйте этот CSS
#featured
{
overflow:hidden;
}
Я создал раскладку нескольких столбцов CSS3 для галереи изображений, которая хорошо выглядит в Firefox.
<section id="featured">
<article>
<img src="http://sheepy.me/incoming/images/posts/blog/thumb_tim-burton-pokemans.png" />
</article>
<article>
<img src="http://sheepy.me/incoming/images/posts/blog/thumb_hem-tourniquet.png" />
</article>
<article>
<img src="http://sheepy.me/incoming/images/posts/blog/thumb_hem-tourniquet.png" />
</article>
<article>
<img src="http://sheepy.me/incoming/images/posts/blog/thumb_tim-burton-pokemans.png" />
</article>
<article>
<img src="http://sheepy.me/incoming/images/posts/blog/thumb_tim-burton-pokemans.png" />
</article>
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, чтобы открыть его, он добавляет дополнительное пространство в нижней части <section>
, которое я не собираюсь его исправлять.
Я искал в Интернете и нашел этот поток, но я не уверен, что это та же проблема.
Проверьте эту ссылку fiddle и попробуйте открыть ее с помощью Chrome и Firefox.
Попробуйте этот CSS
#featured
{
overflow:hidden;
}
Быстрое исправление, нацеленное только на -webkit-браузеры
#featured {
-webkit-margin-after: -110px;
}
В каждой статье 20px используется нижний край, и заполнить контейнер в 20px,
Смотрите fiddle
#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;
}
Источник: Аналогичный вопрос, CSS-трюки
Не используйте свойство column-break-inside: avoid;
any margin
или padding
, border
just margin-bottom
, я думаю, это лучшее решение для этой проблемы. http://jsfiddle.net/SdtP5/3
Если я правильно понимаю вопрос,
вы можете попробовать добавить padding:0
или даже что-то вроде padding:-10px;
или аналогично контейнеру
Вы сделали padding: 10px;
, который также добавляет дополнение к нижней части. Используйте это, чтобы удалить дополнение внизу:
padding: 10px 10px 0px 10px;