CSS столбцы и выпуск Маржа

Question

Update: Последний код, который работает во всех браузерах, расположенных в этом JSFiddle - https://jsfiddle.net/webvitaly/yu00ugft/5/

Я пытаюсь сделать реагирующие столбцы, используя чистый CSS подход.

У меня проблема, когда столбцы иногда имеют разницу/маржу вверху.

JSFiddle ссылку, чтобы попытаться исследовать - https://jsfiddle.net/webvitaly/yu00ugft/

Как решить эту проблему?

CSS:

.fx-columns { 
    background: yellow; 
    -webkit-column-count: 2; 
    -moz-column-count: 2; 
    column-count: 2; 
    -webkit-column-gap: 30px; 
    -moz-column-gap: 30px; 
    column-gap: 30px; 
} 

.fx-columns-3 { 
    -webkit-column-count: 3; 
    -moz-column-count: 3; 
    column-count: 3; 
} 

.fx-columns-4 { 
    -webkit-column-count: 4; 
    -moz-column-count: 4; 
    column-count: 4; 
} 

.fx-columns .fx-column { 
    -webkit-column-break-inside: avoid; 
    break-inside: avoid; 
    background: pink; 
    clear: both; 
    margin-bottom: 20px; 
} 

HTML:

<div class="fx-columns fx-columns-4"> 
    <div class="fx-column"> 
    <h3>Header</h3> 
    <p>Text paragraph</p> 
    </div> 
    <div class="fx-column"> 
    <h3>Header</h3> 
    <p>Text paragraph</p> 
    <p>Text paragraph</p> 
    <p>Text paragraph</p> 
    </div> 
    <div class="fx-column"> 
    <h3>Header</h3> 
    <p>Text paragraph</p> 
    <p>Text paragraph</p> 
    </div> 
    <div class="fx-column"> 
    <h3>Header</h3> 
    <p>Text paragraph</p> 
    <p>Text paragraph</p> 
    <p>Text paragraph</p> 
    <p>Text paragraph</p> 
    </div> 
    <div class="fx-column"> 
    <h3>Header</h3> 
    <p>Text paragraph</p> 
    </div> 
    <div class="fx-column"> 
    <h3>Header</h3> 
    <p>Text paragraph</p> 
    <p>Text paragraph</p> 
    </div> 
    <div class="fx-column"> 
    <h3>Header</h3> 
    <p>Text paragraph</p> 
    <p>Text paragraph</p> 
    <p>Text paragraph</p> 
    </div> 
    <div class="fx-column"> 
    <h3>Header</h3> 
    <p>Text paragraph</p> 
    </div> 
    <div class="fx-column"> 
    <h3>Header</h3> 
    <p>Text paragraph</p> 
    <p>Text paragraph</p> 
    </div> 
    <div class="fx-column"> 
    <h3>Header</h3> 
    <p>Text paragraph</p> 
    <p>Text paragraph</p> 
    <p>Text paragraph</p> 
    </div> 
</div> 

Answer 1

В настоящее время вы храните контент от разрывов между столбцами. Однако браузер разбивает margin между столбцами, что приводит к тому, что некоторые из столбцов не начинаются сверху.

Добавьте это в CSS:

.fx-column { 
    display: inline-block; 
} 

Затем вы должны дать столбцы фиксированную ширину.

Знайте, однако, что существует множество проблем с использованием свойства count count css. См. Это article для получения дополнительной информации.

Редактировать: Если вы хотите, чтобы ширина столбцов была отзывчивой, вы можете просто установить их на width: 100%, чтобы они расширялись по мере расширения браузера.

Answer 2

Вы можете установить верхний край-и топ-отступы в ноль, чтобы решить эту проблему. Вы можете использовать CSS универсальный (*) селектор:

*{padding-top:0; margin-top:0;} 

Но помните, универсальные стили селектор будет применяться ко всей странице.