时间戳

首页 > 解决方案 > CSS，HTML中的表格内的图像

html - CSS，HTML中的表格内的图像

问题描述

当我在半屏中打开页面时，它看起来像这样

方式半屏出现

但是当我全屏打开它时，它看起来像这样

全屏出现的方式

我尝试添加 minmax-width但我不知道问题出在哪里

.Price {
  font-size: 10pt;
}

.infoS {
  background-color: #da9b48;
  color: rgb(31, 22, 5);
  padding: 3px;
  width: 90%;
  margin: 0 auto;
  margin-top: 15px;
  padding-left: 45px;
}

.Pinfo {
  font-size: 7pt;
}
<table>
  <td class="infoS">
    <p class="Pinfo">
      PIXMA G640
    </p>
    <img src="./images/PIXMA G640.png" alt="Pixma photo printer" width="75" height="75">
    <p class="Price">
      Price : 150$
    </p>
  </td>
  <td class="infoS">
    <p class="Pinfo">
      PIXMA TS7440
    </p>
    <img src="./images/PIXMA TS7440.png" alt="Pixma photo printer" width="75" height="75">
    <p class="Price">
      Price : 250$
    </p>
  </td>
  <td class="infoS">
    <p class="Pinfo">
      PIXMA G540
    </p>
    <img src="./images/PIXMA G540.png" alt="Pixma photo printer" width="75" height="75">
    <p class="Price">
      Price : 170$
    </p>
    <td class="infoS">
      <p class="Pinfo">
        PIXMA G540
      </p>
      <img src="./images/PIXMA G540.png" alt="Pixma photo printer" width="75" height="75">
      <p class="Price">
        Price : 120$
      </p>
    </td>
    </tr>



</table>

标签： htmlcssimagehtml-tablecss-position

解决方案

**您的代码也缺少结束标记tr和缺少td标记。

对于解决方案，我建议您使用 'display: inline-flex'justify-content: space-evenly在这种情况下。

.Price {
  font-size: 10pt;
}

.infoS {
  background-color: #da9b48;
  color: rgb(31, 22, 5);
  padding: 3px;
  width: 90%;
  margin: 0 auto;
  margin-top: 15px;
  padding-left: 45px;
}

.Pinfo {
  font-size: 7pt;
}

tr.row {
  width: 100vw;
  display: inline-flex;
  justify-content: space-evenly;
}
<table>
  <tr class="row">
    <td class="infoS">
      <p class="Pinfo">
        PIXMA G640
      </p>
      <img src="https://i.picsum.photos/id/977/536/354.jpg?hmac=slVWYbVbxWnJGkpSJ9FX_iXkIBqJAupfNrNR1CWBoAQ" alt="Pixma photo printer" width="75" height="75">
      <p class="Price">
        Price : 150$
      </p>
    </td>
    <td class="infoS">
      <p class="Pinfo">
        PIXMA TS7440
      </p>
      <img src="https://i.picsum.photos/id/977/536/354.jpg?hmac=slVWYbVbxWnJGkpSJ9FX_iXkIBqJAupfNrNR1CWBoAQ" alt="Pixma photo printer" width="75" height="75">
      <p class="Price">
        Price : 250$
      </p>
    </td>
    <td class="infoS">
      <p class="Pinfo">
        PIXMA G540
      </p>
      <img src="https://i.picsum.photos/id/977/536/354.jpg?hmac=slVWYbVbxWnJGkpSJ9FX_iXkIBqJAupfNrNR1CWBoAQ" alt="Pixma photo printer" width="75" height="75">
      <p class="Price">
        Price : 170$
      </p>
    </td>
    <td class="infoS">
      <p class="Pinfo">
        PIXMA G540
      </p>
      <img src="https://i.picsum.photos/id/977/536/354.jpg?hmac=slVWYbVbxWnJGkpSJ9FX_iXkIBqJAupfNrNR1CWBoAQ" alt="Pixma photo printer" width="75" height="75">
      <p class="Price">
        Price : 120$
      </p>
    </td>
  </tr>



</table>

工作小提琴

推荐阅读