Question

我创建了一个个人资料页面以列出用户的条目。我从使用CSS列的常规条目列表中复制并粘贴了条目列表。当我使用个人资料页面上的列时，列会出现毛刺，如here所示。

（请忽略固定的导航栏）

这是个人资料页面（profile.blade.php）中的HTML标记：

    <div class="fixed-width" style="margin: 18pt auto;">
    <div class="card-container">
        @foreach ($entries as $entry)
        <a href="{{ action('EntryController@show', [$entry->slug]) }}">
            <article class="card">
                <div style="background-image: url(/storage/{{ $entry->photo->photo() }}); background-size: cover; background-position: center;"></div>

                <p>{{ $entry->title }}@if(!is_null($entry->alt_title)) ({{ $entry->alt_title }})@endif</p>

                <a href="../categories/{{ $category }}">{{ $category }}</a>

                <p>PIN</p>
            </article>
        </a>
        @endforeach
    </div>
</div>

这是CSS：

    .card{
    height: 260pt;
    transition: filter .25s;
    margin-bottom: 18pt;
    break-inside: avoid-column;
    display: block;
}
.card:hover{
    -webkit-filter: brightness(105%); /* Safari 6.0 - 9.0 */
    filter: brightness(108%);
    transition: filter .25s;
}
.card-container{
    -moz-column-width: 225pt;
    -webkit-column-width: 225pt;
    column-width: 225pt;
    column-gap: 18pt;
}

由于某种原因，当我将列数样式设置为3时，列将正常工作。但是，如果将其设置为4或更大，则会出现故障。

这里有人遇到过这个问题吗？你有解决办法吗？

当我将列数设置为4时，为什么CSS列会出现故障？

0 个答案: