Question

我正在创建一个名为＆＃34;在线商店＆＃34;在我的网站上。我想到了展示产品的方式和没有边框的桌子＆＃34;是我想到的那个。我做了它，但标题的一部分隐藏在产品的图像下。有没有办法我可以修复它或尝试除了没有边框的桌子以外的任何东西？

<table>   <tr>
    <td><figure>   <img src="cartt.png" alt="The Pulpit Rock" width="130" height="130">   <figcaption>French Manicure<br/>150SR<p
style="color:green;">In Stock</p></figcaption> </figure> </td>
    <td><figure>   <img src="cartt.jpg" alt="The Pulpit Rock" width="130" height="130">   <figcaption>French Manicure<br/>150SR<p
style="color:green;">In Stock</p></figcaption> </figure></td>
    <td><figure>   <img src="cartt.jpg" alt="The Pulpit Rock" width="130" height="130">   <figcaption>French Manicure<br/>150SR<p
style="color:green;">In Stock</p></figcaption> </figure></td>   </tr> 
<tr>
    <td><figure>   <img src="cartt.jpg" alt="The Pulpit Rock" width="130" height="130">   <figcaption>French Manicure<br/>150SR<p
style="color:green;">In Stock</p></figcaption> </figure></td>
    <td><figure>   <img src="cartt.jpg" alt="The Pulpit Rock" width="130" height="130">   <figcaption>French Manicure<br/>150SR<p
style="color:green;">In Stock</p></figcaption> </figure></td>
   <td><figure>   <img src="cartt.jpg" alt="The Pulpit Rock" width="130" height="130">   <figcaption>French Manicure<br/>150SR<p
style="color:green;">In Stock</p></figcaption> </figure></td>   </tr>
</table>

Answer 1

至于使用除了没有边框的桌子之外的其他东西，我倾向于使用＆＃39; div＆＃39; div table vs. div debate的一面，所以我建议您考虑div代替table布局;但是，既然你开始使用表格，我下面的代码片段也会使用表格。

我没有看到你在问题中描述的问题（图片遮盖了标题）;然而，有一些拼写错误和额外/错误的字符使你的输出看起来很奇怪（整个>，style属性以外的标签等等。也许你有CSS，你没有发布你的初始问题？无论如何，这里有一个代码片段，您的代码会整理一下并显示您的内容，因为我认为您希望看到它。

＆＃13;

img.productTumbnail {
  height: 130px;
  width: 130px;
}
span.inStock {
  color: green;
}

＆＃13;

<table>
  <tr>

    <td>
      <figure>
        <img src="http://www.foodsafety.gov/images/sys_images/widget_tip_images_SEP.jpg" alt="The Pulpit Rock">
        <figcaption>French Manicure
          <br/>150SR
          <span class="inStock">In Stock</span>
        </figcaption>
      </figure>
    </td>

    <td>
      <figure>
        <img src="http://www.foodsafety.gov/images/sys_images/widget_tip_images_SEP.jpg" alt="The Pulpit Rock">
        <figcaption>French Manicure
          <br/>150SR
          <span class="inStock">In Stock</span>
        </figcaption>
      </figure>
    </td>

    <td>
      <figure>
        <img class="productThumbnail" src="http://www.foodsafety.gov/images/sys_images/widget_tip_images_SEP.jpg" alt="The Pulpit Rock">
        <figcaption>French Manicure
          <br/>150SR
          <span class="inStock">In Stock</span>
        </figcaption>
      </figure>
    </td>
  </tr>
  >
  <tr>

    <td>
      <figure>
        <img class="productThumbnail" src="http://www.foodsafety.gov/images/sys_images/widget_tip_images_SEP.jpg" alt="The Pulpit Rock">
        <figcaption>French Manicure
          <br/>150SR
          <span class="inStock">In Stock</span>
        </figcaption>
      </figure>
    </td>

    <td>
      <figure>
        <img class="productThumbnail" src="http://www.foodsafety.gov/images/sys_images/widget_tip_images_SEP.jpg" alt="The Pulpit Rock">
        <figcaption>French Manicure
          <br/>150SR
          <span class="inStock">In Stock</span>
        </figcaption>
      </figure>
    </td>

    <td>
      <figure>
        <img class="productThumbnail" src="http://www.foodsafety.gov/images/sys_images/widget_tip_images_SEP.jpg" alt="The Pulpit Rock">
        <figcaption>French Manicure
          <br/>150SR
          <span class="inStock">In Stock</span>
        </figcaption>
      </figure>
    </td>
  </tr>
</table>

＆＃13;

一张图像和字幕表＆amp;字幕似乎没有组织

1 个答案: