3

CSS パディングと組み合わせて css 'column-count' を活用しようとしています。また、列数を 3 に指定すると、コンテンツが収まらない場合、ブラウザーは 4 番目の列の一部をレンダリングすることを観察しています。以下に示すように

ここに画像の説明を入力

ここに JSFidle があります - > https://jsfiddle.net/w40jcykp/1/

これは Chrome & Edge で見られます。これは既知の問題ですか、それとも回避策はありますか?

よろしくお願いします。

以下CSS。

.newspaper {
    column-count: 3;
    min-height:144px;
    height:144px;
    padding:20px;
    column-gap:10px;
    border: 1px solid black;
    overflow:hidden;
}
4

1 に答える 1

1

ここでの問題は、コンテナに固定の高さを設定したことだと思います。高さが固定されていると、列が大きくならないため、レンダリング エンジンはコンテナー内のコンテンツに合わせてさらに列を作成し続けます。

フィドルでオフoverflow: hiddenにすると、実際にはボックスの側面からさらに多くの列があふれていることがわかります。は、そのpaddingうちの 1 つの一部を表示できるようにします。

ここでの根本的な原因は高さのバランスです。MDN から:

CSS3 列の仕様では、列の高さのバランスが取れている必要があります。つまり、各列のコンテンツの高さがほぼ等しくなるように、ブラウザーが列の最大高さを自動的に設定します。Firefox はこれを行います。

ただし、状況によっては、列の最大高さを明示的に設定し、コンテンツを最初の列から開始して必要な数の列を作成し、右にオーバーフローする可能性があるようにレイアウトすることも有用です。したがって、CSS の高さまたは最大高さのプロパティを複数列のブロックに設定することによって高さが制限されている場合、各列はその高さまで拡張でき、新しい列を追加する前にそれ以上拡張することはできません。このモードは、レイアウトの効率も大幅に向上します。

高さを設定したので、高さのバランスは、ブラウザーが列をその高さに固定し、コンテンツを表示するために必要な数の列を作成することを示しています。

列を正しく成長させて流れさせ、プロパティに従うようにする場合は、固定の高さを削除する必要がありますcolumn-count。

于 2016-10-07T12:23:44.237 に答える