Question

我正在尝试用两列创建一个html表。第一个是图像，第二个是伴随文本。

我使用的图像很小，所以我决定拉伸它。但是当我拉伸图像时，td不会相应地拉伸（高度增加，但宽度不会）。

因此，第一列的图像与第二列的文本重叠。有没有人建议让表格单元格调整大小以适应图像？

谢谢！

这里是CSS：

table
{
width: 100%;
}

td
{
    vertical-align: middle;
    padding: 1em 1em 1em 1em;
    margin: 0em 0em 0em 0em;
    width: auto;
 }

#img1
{
    padding: 0em 0em 0em 0em;
    margin: 0em 0em 0em 0em;
    vertical-align: top;
    width: 150%;
    display: block;
}

这是HTML：

<div>
    <table>
        <tr>
            <td nowrap><img id="im1" src="../images/dragon.gif" /></td>
            <td>
                <div id="text-quote">

                    <p>Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna</p>

                </div>
            </td>
         </tr>
     </table>
 </div>

Answer 1

好。您给图像的宽度为150％，因此显然是容器的150％，在这种情况下，它是表格单元格，因此它可以正确显示。

如果你想让图像更大，请增加<TD>的宽度，并为图像添加100％的宽度（因此需要100％的td宽度）

.imageTD {width:150%;}
#im1 {
    padding: 0em 0em 0em 0em;
    margin: 0em 0em 0em 0em;
    vertical-align: top;
    width:100%;
    display: block;
}

FIDDLE

html表中的超大图像

1 个答案: