3

これは通常の 3 列レイアウトの質問ではありません :-)

新聞の案内広告セクションを想像してみてください (覚えていますか?)... 画面に固定サイズのボックス (たとえば 600x200) を 3 列に分割し、各列にツイートを表示するデザインをしています。そのため、ツイートは最初の列を埋め始め、収まりきらないツイートになるまで最初の列に積み上げられ続けるため、次の列にぶつけられます..など.

これが私が求めているもののモックアップです（各ツイートの名前を消去する必要がありましたが、アイデアはわかります）：

ここに画像の説明を入力

できるだけ多くのツイートをボックスに収めることが目標であるため、注意が必要ですが、各ツイートの高さがどのくらいになるかはわかりません... 1 つの単語でも、すべて大文字を使用した 140 文字すべてでもかまいません。たくさんのスペース。囲みボックスは常に同じサイズで、変更できません。したがって、次の列に移動して利用可能なすべてのスペースを埋めるタイミングを認識できるように、ある種のスマートな「フロー」が必要です。CSS/HTML でこれを行う方法はありますか?

4

1 に答える 1

5

CSS だけを使用すると、列が最適な方法のように見えます。

デモ

デモ リンクのスクリーン ショット、3 列のツイート

HTML

<strong>各ツイートは、ユーザー名と<p>ツイート本文のペアです。これらを好きなように変更しますが、一致するように CSS を変更してください。

<div class="threecol">
<strong>@someone</strong>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae.</p>  
<strong>@nextuser</strong>
<p>...</p>
</div>

CSS

この CSS はコンテナー用です。仕様 (幅、高さ、非表示のオーバーフロー) 以外は、列の設定を追加するだけです。

.threecol {
  height: 200px;
  width: 600px;
  margin: auto;
  overflow: hidden;
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
}

これは、つぶやきを s と一致させたいスタイルのためのもの@nameです。

p {
  display: inline;
  width: 30%;
}

<p>これにより、aと次のツイートの間に改行が発生します。

p:after {
  display: block;
  content: '';
  margin: 10px 0;
}

ブラウザの互換性

この単純なセットアップでは、ほとんどのブラウザーで問題なく動作するはずです。古いブラウザーの場合、すべてが積み上げられているだけで、見た目は問題なく、ほぼ同じ数のツイートが表示されます。

列が無効になっている場合、つぶやきが積み上げられます

問題

  1. ツイートが (非表示の) 4 番目の列に折り返されると、ツイートが途切れる可能性があります。
  2. jQuery は、列内の要素の上部/左と (一見間違っているように見える) 幅/高さを正しく報告しません。
  3. これは W3 標準のドラフトに基づいており、構文は変更される可能性があります。とは言っても、現時点ではあまり変わらないかもしれません。

代替案

Masonry プラグインを検索して、底部がコンテナーの底部より下にある要素を非表示にすることができます。おそらく固定高さのコンテナに最適なソリューションです。

于 2013-08-10T04:36:38.923 に答える