0

私はスタイルシートにかなり慣れていないので、これは非常に簡単な質問かもしれません。Amazon の Web サイトには、真似したい 2 つの非常に優れた機能があることに気付きました。

  1. ページの中央には、推奨事項やその他のアイコンを水平方向にレイアウトするグリッドがあります。ページの幅に応じて、4 つまたは 5 つ、または 6 つから 8 つまでのアイコン/項目が水平方向に表示されます。ページを更新せずにこれを行います。ソースを読んでみましたが、これを実現させているスタイルシートのトリックのようです。

  2. 左の「Shop by Department」も面白い。ページが狭い場合は消えますが、マウスオーバーすると表示されます。ページが広い場合は表示されます。

誰かが私を正しい方向またはいくつかのサンプルコードに向けることができれば、それは素晴らしいことです. ありがとう

4

1 に答える 1

0

質問1：

cssだけではありません。

テーブルを使用して、すべての行に必要な数の要素を格納してから、テーブル全体に一般的な幅を設定します。

javascript/jquery を使用して、そのテーブル サイズに従って各要素の幅を計算します。

質問 2: http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-31-fixed-fluid-fixed/ それを見てみたいと思うかもしれません。Amazonのサイトを見る限り、サイドバーが消えることはありません。

編集：

1. 幅が 1000px のページがあるとします。2.左から200pxがサイドバーに設定されます。3.jQuery を使用して、現在のページ幅を確認します。4.if pageWidth<1000px, sidebar{display:none;}

しかし実際には、これらのコードはネット上のどこにでもあります。

于 2012-05-18T02:58:14.763 に答える