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