0

JavaScriptを使用せず、テーブルを使用せずに次のレイアウトを実装しようとしています:

ページにはたくさんの行があります。各行は 4 つのコンテンツ要素で満たされ、最も高い要素が行の高さを決定します。各コンテンツ要素には、他の 2 つの要素 (この場合は画像とキャプション) があります。画像は行の上部に配置され、キャプションは下部に配置されます。

HTML 構造では、画像とキャプションを content 要素内で一緒にする必要があります。

私が試したいくつかの解決策：

各行を画像の行とキャプションの行の 2 つに分割すると、キャプションから画像が分離されます。

有名な等高列のdiv 構造を使用すると、見苦しい絶対配置のマトリョーシカ人形の div 配置になります。

テーブルの問題は、ページが将来的により動的になることです (再配置可能なコンテンツ、流動的なレイアウト、動的検索、さまざまな幅のコンテンツ)。テーブルはこれを行うのが非常に面倒です。

4

1 に答える 1

1

私があなたのマークアップを正しく想像しているなら、おそらくこれでうまくいくでしょう：

http://jsfiddle.net/Puppies4Life/Fd94X/1/

.caption を .row の一番下に配置しました。.content の高さがさまざまであるため、直接の親である .content ではなく、.caption を .row に配置するようにしました。画像はドキュメントの流れに残ります。テキストを考慮して .row の下部に追加のパディングを追加し、単純な明確な修正を加えました (本番コードでより良いオプションを使用することをお勧めします)

これがあなたの問題を解決するのに役立つか、またはアイデアに火をつけることを願っています!

于 2012-07-25T23:14:44.400 に答える