0

印刷用にスタイル設定したテーブル グリッド レイアウトがありますが、サムネイル イメージを左に揃えてから、サムネイルの横に 2 行並べようとすると問題が発生します。

私はdivの使用に慣れているため、テーブルを使用してこれを正しく配置する方法がわかりません。

私はここに以下のコードを持っています: - http://jsfiddle.net/nCTFe/

したがって、基本的に [FIRST LINE and SECOND LINE] は最初のテーブルのようにする必要がありますが、左側の画像と並んで、現時点では私のテーブルはその下に座っています!

どんな助けでも素晴らしいでしょう、フィドルはこれをよりよく示しています!

<table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tbody>
        <tr>
            <td width="30%" class="bottom_bdr stocklistItemImage">
                <img height="75" width="100" class="stocklist_thumb" 
                     border="2"  src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/5d/Funivia_Rote_Nase_alt.JPG/300px-Funivia_Rote_Nase_alt.JPG" 
                     alt="">
            </td>
        </tr>

        <tr>
            <td width="70%" class="vfeatures bdrBottom">
                <span style="font-weight:bold">FIRST LINE:</span> Seatis, Seatis, Seatis, Seatis, Seatis, Seatis, Seatis
            </td>
        </tr>

        <tr>
            <td width="70%" class="bottom_bdr a_top stocklistItemDescription">
                <span style="font-weight:bold">SECOND LINE</span> Seatis, Seatis, Seatis, Seatis, Seatis, Seatis, Seatis
            </td>
        </tr>
        <tr>
            <td class="" width="70%">&nbsp;</td>
        </tr>
    </tbody>
</table>
4

1 に答える 1

1

HTML テーブルがどのように機能するかについての基本的な理解を得る必要があります。<tr>「テーブル行」、またはテーブル内のセルの水平方向の配置を意味します。

したがって、テキストを画像の右側に配置するには、それらを同じ行に配置する必要があります。ただし、2 つの行 (1 行目と 2 行目) の両方を画像と同じ行にする必要があるようです。rowspanこれを行うには、最初の<td>(画像の) を に設定し、最初の行を画像と同じ2に配置し、次に2 番目の行を新しい に配置します。<tr><tr>

    <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tbody>
            <tr>
                <td width="30%" class="bottom_bdr stocklistItemImage" rowspan="2>
                    <img height="75" width="100" class="stocklist_thumb" border="2" src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/5d/Funivia_Rote_Nase_alt.JPG/300px-Funivia_Rote_Nase_alt.JPG" alt="">
                </td>
                <td width="70%" class="vfeatures bdrBottom">
                    <span style="font-weight:bold">FIRST LINE:</span> Seatis, Seatis, Seatis, Seatis, Seatis, Seatis, Seatis
                </td>
            </tr>
            <tr>
                <!--No first cell here; it's already covered by the image td with the rowspan="2" -->
                <td width="70%" class="bottom_bdr a_top stocklistItemDescription">
                    <span style="font-weight:bold">SECOND LINE</span> Seatis, Seatis, Seatis, Seatis, Seatis, Seatis, Seatis
                </td>
            </tr>
        </tbody>
    </table>

ここでフィドルを更新しました：http: //jsfiddle.net/CjAMc/1/<td> （幅70％ の最後の空白も削除する必要がありました。）

さらに、あなたのフィドルのテーブル レイアウトはごちゃごちゃしており、さらに多くの問題に遭遇することになります。テーブルの仕組みを学び、このプロジェクトをゼロから始めることを強くお勧めします。

于 2012-11-06T14:05:05.380 に答える