-1

(構造と可能なコンテンツについては、下のウィジェット画像を参照してください)。私が取り組んでいるアプリケーションには、可変コンテンツを持つ固定サイズのウィジェットがあります。コンテンツには、ウィジェットが表示される場所とタイミングによって異なる「コンテンツ」のコンテナーが 3 ~ 5 個あります。ただし、ウィジェット自体は常に同じサイズです。

各「コンテナ」内のコンテンツは、常に垂直方向および水平方向の中央に配置されます。組み合わせ (下の画像を参照) は次のとおりです。

  • ステータス コンテナは常にそこにあります(コンテナ 1)
  • 2 番目の「行」には、1 つまたは 2 つのコンテナーがあります。1 つの場合は、幅全体に広がります。2 つの場合、それぞれが合計の 1/2 です
  • 3行目は2行目と同じですが、空にもできることが追加・変更されています

現在、この問題に取り組むには 2 つの方法があります。それは、Div と Table です。

div の場合は、次のようになります。

<div outer container>
 <div container 1></div>
 <div container 2>
  <div container 2a></div>
  <div container 2b></div>
 </div> end container 2
 <div container 3>
  <div container 3a></div>
  <div container 3b></div>
 </div> end container 3
</div> end outer container

テーブルの場合は、次のようになります。

<table>
 <tr colspan=2><td>Container 1</td></tr>
 <tr><td>Container 2a</td><td>Container 2b</td></tr>
 <tr><td>Container 3a</td><td>Container 3b</td></tr>
</table>

また、2 番目または 3 番目のコンテナーが 1 つの「列」のみである場合は、colspan を適切に適用します。

特に水平方向と垂直方向のオブジェクトの配置に関しては、テーブルのアプローチの方が簡単なように思えますが、テーブルが禁止される傾向があることを知っているので、他の人に確認したいと思います。ただし、実際には表形式のデータをコンテンツとして表示しているため、ここでは表が適切であると考えています。

考え?

ウィジェットのアーキテクチャ http://www.5sn1.com/images/quantity_widget.png

4

3 に答える 3

1

レイアウトにテーブルを使用することは一般的に眉をひそめますが、テーブルを使用しない本当の理由はありません。あなたが言ったように、それはそれをより簡単でより論理的にします。

全体として、あなたは本当にあなたのために働くものと一緒に行くべきです。

于 2012-10-29T23:53:38.897 に答える
1

私の意見では、どちらの方法でも問題ありませんが、これらのウィジェットをクロスブラウザーにすることを目指している場合は、あなたが言及した垂直方向の配置のように、テーブルを使用すると頭痛が少なくなります. ほとんどの場合、レイアウト用のテーブルは悪いことに注意してください。ただし、上司が IE 7/8 をテーブルに呼び出すときに使用します。

その例は表形式のデータとは見なされないと思います。一般に、データグリッドのようなものです。

とにかく、コリンクが言ったように、それはあなた次第です。あなたに合った方法を使用してください.

于 2012-10-30T00:11:53.447 に答える
1

あなたに合ったものは何でも使わないことをお勧めします。はい、短期的には最も簡単な方法ですが、後でレイアウトを維持/更新することはより困難になる可能性があります。「今」だけを考えるのではなく、拡張について考えたり、将来、別の開発者が作業を引き継ぐ必要があるかどうかを考えたりすることをお勧めします。

サイト/アプリに適したものを使用してください。サイトの UI が 100% 完璧な画像である、100% クロス ブラウザーと互換性がある、または 100% 検証コードであることが最も重要である場合。残念ながら、通常、これら 3 つの状況をすべて満たすことはできません。したがって、サイトで機能し、保守可能なものを使用してください。

個人的には、表形式のデータを表示する際に、DIV をジャグリングするのではなく、テーブルを使用することが理にかなっている場合に使用します

于 2012-10-30T00:07:07.157 に答える