1

私はこのようなテーブルを持っています (8 つのセルは説明目的のためだけで、多かれ少なかれかもしれません):

[1] [2] [3] [4]
[5] [6] [7] [8]

各セルの各アイテムは幅が約 450px であるため、1920x1200 の画面 (ちなみに、これは私のものです) で隣同士に快適に収まります。ただし、この構成を自動的に変更し、より小さな (またはより広い) 画面解像度を持つ人が現れたり、ブラウザー ウィンドウのサイズを変更したりした場合に備えて、可能な限り最善の方法で調整する必要があります。

したがって、1024x768 の場合は次のようになります。

[1] [2]
[3] [4]
(etc)

2560x1600 の場合は次のようになります。

[1] [2] [3] [4] [5]
[6] [7] [8] [9] [10]
(etc)

どうすればこのようなことをすることができますか - おそらく jQuery や CSS でしょうか?

4

2 に答える 2

0

テーブルを使用する代わりに、順序なしリストを使用します。順序付けられていないリスト自体 (またはおそらくそのコンテナー) の幅がパーセンテージ幅であることを確認します (ブラウザー ウィンドウのサイズに合わせて調整されます)。各要素をフロート<li>し、同じサイズにする場合は幅を指定します。あとはブラウザがやってくれます。

例：

HTML:
<ul id="mydata">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

CSS:
ul#mydata { width: 90%; }
  ul#mydata li { width: 450px; float: left; } /* Don't *have* to specify width */
于 2010-07-12T04:47:47.600 に答える
0

自分で探してやっと見つけた

「テーブル」を使用しないで、「div」を使用し、各 div のスタイル属性を「float: left」に設定して...ブロックの幅と高さを設定すると、次のように機能します。

<div style=\"width: 100px; height: 100px; float: left\">CONTENT</div>
<div style=\"width: 100px; height: 100px; float: left\">CONTENT</div>
<div style=\"width: 100px; height: 100px; float: left\">CONTENT</div>
<div style=\"width: 100px; height: 100px; float: left\">CONTENT</div>
<div style=\"width: 100px; height: 100px; float: left\">CONTENT</div>
<div style=\"width: 100px; height: 100px; float: left\">CONTENT</div>

たとえば、ページのサイズを変更してみてください。

それが他の誰かに役立つことを願っています。

セルダン

于 2013-03-11T03:22:08.023 に答える