0

背景：phpからテーブルベースのギャラリーを自動的に生成する写真のショッピングカートを使用しているため、柔軟性が制限されています。私も初心者です。

問題：ギャラリーは、コンテンツに高さが適応するテーブルセルを配置します。水平方向のサムネイルの完全な行がある場合、テーブルセルは短く幅が広く、行に垂直方向のサムネイルが含まれている場合、セルははるかに高くなります。セルをすべて正方形にし、サムネイルを真ん中に配置します。

スタイルシートの入力CSSと、HTML入力の小さなセクションにアクセスできますが、このHTMLは個々のサムネイルテーブルセル内に挿入されます。メインテーブルのHTMLを編集するためのアクセス権がありません。firebugを使用して、多くのコンポーネントのクラス名とID名を発見しました。

私が試したこと：固定サイズのDIVを挿入しようとしましたが、テーブルは実際の画像で占められていない垂直方向のスペースを消費します。180px x 180pxの透明なPNGファイルをdiv（適切なサイズのセルを強制するように機能します）に挿入してから、サムネイル画像（150px x 150px）を別のdivに入れて、z-indexing、relativeを混乱させてみました/絶対位置などですが、2つのdivを積み重ねることはできませんでした。絶対配置では、50個のサムネイルすべてが、テーブルセルではなく、常にページの左上隅に配置されます。現在、サムネイルdivは常にPNG divのすぐ下に表示されるため、テーブルセルが高すぎます。

スキルセット内のすべてを試し、グーグルを使い果たしたため、行き詰まりました。私が必要としているのは、テーブルセルを特定の高さに保つか、サムネイル画像をPNGの上にオーバーレイする方法を見つける方法だと思います。

これが私の現在のコードで、180x180 PNG（テーブルを正しいサイズに強制するため）を1つのdivに配置し、サムネイル画像を最初のdivの下の2番目のdivに配置しています。私は決してプロではなく、ただのいじくり回しであるため、私の怠惰を許してください！

個々のテーブルセルに挿入されたHTML

<div id="thumb_frame"><img src="/180x180.png"</div>
<div id="thumb_image">[THUMBNAIL]</div>

そして、私はこれらの追加のクラスとIDにアクセスできます。

<table class="thumbnails_table">
<td class="thumbnails_cells">
4

2 に答える 2

1

TDにHTML（もちろん画像タグ以外）を追加しなくても、純粋なCSSでこれを実行できると思います。

td.thumbnails_cells {
    width: 180px;
    height: 180px;
    text-align: center;
}

これが私にとって必要なすべてです。なぜなら、私のテスト画像はすでに垂直方向の中央に配置されていたからです（TD内にあるためだと思います-デフォルトのCSSなど）。

お役に立てれば！

于 2011-02-02T00:44:22.440 に答える
0

OK、私はこれを理解しました...とても簡単ですが、あなたがこれまでにそれをやったことがないときはねえ...

別のスレッドの良いアドバイスに基づく：

<div style="height:180px; width:180px>
<table cellspacing=0>
<tr>
<td style=height:180px; padding:0; vertical-alignment:middle">
[THUMBNAIL]
</td></tr></table>
</div>
于 2011-02-02T00:49:48.773 に答える