2

列のレイアウトを固定して、次の作業を開始する前に列を垂直方向に埋めるテキストを取得するにはどうすればよいですか。言い換えれば（クロムからのスクリーンショット）;

ここに画像の説明を入力

問題は、5 つの列を指定すると、1 つの列に完全に収まる 1 行でも可能な限り多くの行に広がることです。

これではない

「賢明な」ことをさせることができないようです。列数を動的に変更したくないので、純粋な CSS でこれを実行できるようにしたいと考えています。最初の列を最初に埋めてから、2 番目の列に移動し、次に 3 番目の列に移動します。

出来ますか？これが私がこれまでに使用しているものです。

.content{
-webkit-column-count: 5;
-moz-column-count: 5;
-ms-column-count: 5;
-o-column-count: 5;
column-count: 5;

-webkit-column-gap: 20px;
-moz-column-gap: 20px;
-ms-column-gap: 20px;
-o-column-gap: 20px;
column-gap: 20px;
}

フィドル

4

2 に答える 2

2

コンテンツをラップする<p>か、それに似たものを適用するbreak-insideと、動作します: http://jsfiddle.net/26NGr/1/

.content p {
    margin: 0;
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
}
于 2013-08-05T15:32:16.703 に答える
2

次の CSS で動作させることができます。

column-fill:auto; /* not supported in chrome, but appears to be the default */
height:100px;

%ただし、サイズでは機能しません。pxできない固定サイズを使用する必要があります。

アップデート

ただし、このソリューションは相対的なサイズで機能し、最新の Chrome、IE、FF、および Safari で機能するようです。

padding-bottom トリックを使用して、wrapperコンテナーの相対的な高さを設定することができました。

.wrapper {
    padding-bottom:10%; /* spacer - this is my relative height */
    background-color:lightblue;
    position:relative; /* abs coord stop here */
}

これとともに;

<h1>short test</h1>
<div class="wrapper">
   <div class="content">
   The quick brown fox jumps over the lazy dog.
   </div>
</div>

次に、これを行うことができます。

.content{
    -webkit-column-count: 5;
    -moz-column-count: 5;
    -ms-column-count: 5;
    -o-column-count: 5;
    column-count: 5;

    -webkit-column-gap: 20px;
    -moz-column-gap: 20px;
    -ms-column-gap: 20px;
    -o-column-gap: 20px;
    column-gap: 20px;

    column-fill:auto;

    position:absolute;
    top:0;
    left:0;
    height:100%; /* fill wrapper container */
    width:100%;

    background-color:lightgray;
}

トレードオフは、コンテンツが多すぎると、要求した 5 列を超えて水平方向に列を追加し続けることです。下に広がることはありませんが、実際には理にかなっていると思います。

于 2013-08-05T15:36:27.400 に答える