0

レスポンシブ レイアウトを使用するサイトで作業していますが、新しい CSS 複数列プロパティ (http://dev.w3.org/csswg/css3-multicol/) の欠点を回避する際に問題が発生しました。 .

ブラウザー ウィンドウの幅が十分に広い場合は、テキストを 2 つの列に分割し、小さな画像用のサイドバーを配置します。複数列の css プロパティはうまく機能しますが、あまりスマートではありません。

最初のセクションは 2 つの同じ高さの列に均等に分割されていますが、高すぎます。誰かがこのセクションを読むには、最初の列に沿って下にスクロールしてから、次の列の最初に戻って残りを読む必要があります。

2 番目のセクションも同じ高さの 2 つの列に分割されていますが、文が 2 つしかないため、ぎこちなく見えます。ユーザーが読まなければならない 2 番目の列を正当化するのに十分なコンテンツがありません。

私の考えでは、解決策は次のとおりです。

  1. 固定された最大高さでセクションをサブセクションに分割します。そうすれば、ページをスクロールせずに列全体を読むことができ、より記事のように見えます.
  2. その最大高さよりも短いセクションを 1 つの列として保持します。

問題は、CSS3 の複数列がこのように機能しないことです。唯一の方法は、文字数、css テキスト プロパティ、および要素のサイズを計算し、文字列を分割/新しい html 要素を追加して、コンテンツを別々のセクションに分散して列を分割することを含む、ある種の JavaScript ソリューションになると思います正しく。

次の 2 つの点に注意してください。

  1. これらの列は流動的な幅であるため、マジック ナンバーの選択は機能しません。
  2. このプロセスは可逆的でなければならず、レスポンシブ レイアウトはブラウザーの幅が狭い場合に 1 列に戻すことができます。

ちょっとトリッキーですが、おそらく試してみるのに十分実行できると思います。すでにこの問題に取り組んでいる可能性のある人について誰か聞いたことがありますか? または、そうでない場合、これのためにアルゴリズムをまとめる方法について何かアイデアはありますか?

どうもありがとうございました。

1/8/13:

わかりやすくするために、レスポンシブ デザインの意図したモードの画像をいくつか示します。（私はSOで初めてなので、リンクは2つだけです）

モード 1: モバイル用に線形化された単一列

モード 2. iPad 用のサイドバー付きの 1 列 / 狭いブラウザー ウィンドウ

モード 3.幅の広いブラウザー ウィンドウの 2 列

モード 3 が問題です。最初のセクションのコンテンツは長すぎて 1 ページに収まらないため、この場合はブラウザーの高さに収まる行に分割しています。それが私がJavaScriptソリューションを探しているものです。

4

2 に答える 2

3

あなたが求めているのはこれだと思います-> http://codepen.io/justincavery/full/KsjHa

ここで行っているのは、コンテンツ div 内の文字数のカウントを確認するために jquery を使用することです。

var $div = $( '#blah' );
if($div.text().length >= 600) {
$div.addClass('columns');
}

文字数が 600 以上の場合、「列」のクラスを含む div に追加します。

明確にするために、これは、600 文字未満の記事には「列」クラスが適用されず、600 文字以上の記事には適用されないことを意味します。

DOM を CSS に並べ替えました (このコードペンには、この回答に関係のないスタイルがいくつかあることに注意してください。ガイドとしてのみ使用してください)。

次の段階は、600 文字を超えるコンテンツの列を追加することですが、幅が狭い場合は列が 1 つしかないことを確認する必要があります。

@media screen and (min-width:48em) {
 /*     48.000em /*(ackkkkkk, device specific bad)768px*/
  .columns { 
  -webkit-column-count: 2; /* Saf3, Chrome*/
  -webkit-column-gap: 4%; /* Saf3, Chrome*/
  -moz-column-count: 2; /* FF3.5+ */
  -moz-column-gap: 4%; /* FF3.5+ */
  column-count: 2; /* Opera 11+*/
  column-gap: 4%; /* Opera 11+*/
}
}

ここでは、列を定義するポイントとして 48em 以上 (iPad の縦長以上) を選択し、小さな画面を 1 つの列にできるようにしています。

後で取り上げた問題の 1 つは、テキストが長すぎる場合、もう一度 1 つの列にまとめたいということでした。この場合、より高い値のクラスを削除するか、文字数が 2 つの値の間にあるかどうかを確認するためにチェックを入れる必要があります。

また、背景をピンクに設定し、コンテンツを 2 つの列に設定する垂直メディア クエリを調べ始めたことに気付くかもしれませんが、探しているものは得られませんでした。

質問が見ているこのタイプのテクニックのいくつかのポイント。

  1. 3回目の質問を読むまで、写真からそれらが2つの別々のセクションであることに実際に気づきませんでした. ほとんどの人は、左側の列のコンテンツがページの下部に続いてから、右側の列に移動すると想定します (新聞と雑誌)。これを示すには、各セクションの間に何らかの休憩が必要です。
  2. これはデザインに関するものなので、コンテンツのスタイリングにさらに労力を注ぎたいランディング ページや説明ページに主に使用されると思います。そのことを念頭に置いて、手動でクラスを追加して調整する必要があります。
  3. 最後に、ウェブは印刷物ではなく、人々は 1 ページで物事を読むことに慣れています。

編集

質問を更新した後、あなたが探している実装はこの素晴らしい作品で行われたと思います - http://kaikkonendesign.fi/typesetting-responsive-css3-columns/

于 2013-01-08T12:55:23.767 に答える