0

我有一个表格网格布局,我已经为打印设置了样式,但是我在尝试将缩略图图像向左对齐,然后在缩略图旁边对齐两行时遇到问题。

不确定如何最好地使用表格正确对齐,因为我习惯于使用 div。

我在这里有以下代码:-http: //jsfiddle.net/nCTFe/

所以基本上 [FIRST LINE 和 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>表示“表格行”,或表格中单元格的水平对齐方式。

因此,为了使文本位于图像的右侧,您需要将它们放在同一行中。但是,您似乎希望行(第一行和第二行)都与图像位于同一行。您可以通过将rowspan第一行<td>(用于图像)设置为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 回答