2

設定

RSS フィードを描画してページに表示する Web サイトがあります。現在、各フィードを含む div でパーセンテージを使用しているため、複数のフィードが隣り合って表示されます。

ただし、隣り合っているのは 2 つだけで、ウィンドウのサイズが変更されると、画面に醜い空きスペースができることがあります。

欲望

私ができるようにしたいのですが、まだ方法を考え出していないのは、すべてのフィードをページに直線的に配置し、次のようにすることです。

  • フィード自体が列に「バランス」される「事前構築済み」の複数列ビュー

これは私を次のように導きます：

  • 列の数は、現在の画面の幅に応じて\

これは、ワード プロセッシング アプリケーションがコラム形式のレイアウトを処理する方法に似ています。

質問

なんらかの形の AJAXy の幸福を実装する必要があると思いますが、現在 Javascript についてはほとんど知りません。

CSS/HTML/PHPだけでこれを行う方法はありますか?

そうでない場合、これを解決するにはどうすればよいですか？


最終的解決：

( @warprと@joh6nnの回答に基づく)

#rss
        {min-width: 10em;
        max-width: 25em;
        min-height: 15em;
        max-height: 25em;
        font-size: .97em;
        float: left;
        }
4

4 に答える 4

3

CSS/HTML だけではおそらく望みどおりの結果は得られませんが、多少なりとも近づくことはできます。

フォト アルバムに使用したトリックは次のとおりです。

  1. 各フィードの幅が固定されていることを確認してください。「20em」などをお勧めします。
  2. 各フィードの高さが同じであることを確認してください。
  3. 残ったものすべてを浮かせます。

各 div のサイズは同じであるため、左にフロートすると、ブラウザに収まる正確な列数のグリッドが形成されます。

実際に div の高さを修正し、CSS を使用してコンテンツをクリップしない限り、ステップ 2 で JavaScript が必要になります。

  1. 各フィード div を反復処理し、最も高い div を見つけます。
  2. 最初のステップで見つかった div と一致するように高さを変更して、各 div をもう一度繰り返します。

これはかなり簡単に実装できますが、明らかに最適ではありません。ここに投稿されたより良い解決策を読むことを楽しみにしています:)

于 2008-11-07T14:16:08.810 に答える
1

リストでこれを行うことができるかもしれません。私は試したことがないので、よくわかりません。

リスト項目を display:inline にすると、リストは縦ではなく横になります。そこから、リストを含む要素に詰め込み、パディングとマージンをいじると、テキストのようにリストを改行することができるかもしれません: 繰り返しますが、私はそれを試したことがないので、私はしません知る。

このテクニックがうまくいくなら、私はそれについて非常に興味があります.

于 2008-11-07T14:30:50.823 に答える
0

私が考えることができる唯一の方法は、動的 CSS と JavaScript の混合です。列 (フィード) が追加されるたびに、javascript を使用して、各 div の幅 (パーセンテージ) を書き換えます。

ここで jQuery が役に立ちます。

var columns = $(".feed").size();
var size = 100/columns;
$(".feed").css("width",size+"%");

私が間違っている場合は、誰かが私を自由に修正してください。私のjQueryは少しぐらつきます。

もちろん、AJAX を使用していない場合は、同じソリューションを完全に PHP で実装できます。

于 2008-11-07T15:05:44.140 に答える
0

この jQuery JavaScript を使用することもできます (jQuery ライブラリが必要です)。

var docwidth = $(document).width();
var numOfCollums = $('.feed').length;
var colWidth = docwidth/numOfCollums;
$('.feed').each( function() {
     $(this).width(colWidth);
});

列幅を動的に設定します。

これを機能させるには、列に「feed」クラスが必要です

編集：

div を次のようにスタイルする必要があります。

.feed{
  float:left;
}
于 2008-11-08T10:16:08.967 に答える