Question

我需要在HTML页面上的图像旁边放一些文字。所以我认为一张桌子是最好的方式......

<table width="500px" >
  <tbody>
     <tr>
        <td align="left">
           <p>
               <b>Isn't she hot??</b>
           </p>
        </td>
        <td align="right">  
            <img width="150" height="150" src="http://pixel.nymag.com/imgs/daily/vulture/2015/11/25/25-jennifer-lawrence-directs.w529.h529.jpg" alt="" border="0"/>  
        </td>
       </tr>
  </tbody>

小提琴https://jsfiddle.net/abuMariam/rsnc9vjp/

如果我想将该文本一直向上移动或一直向下移动，问题就出现了。我不能，因为图像宽度使得两个td元素都很宽，所以我无法将文本垂直放置在其td中。

我仍然可以保留表格，但仍然可以在单元格中上下移动文本吗？

Answer 1

是的，只需在vertical-align="top"上使用vertical-align="bottom"或td即可。你真的需要使用table吗？现在很少使用表格，仅用于表格数据。

<table width="500px" >
  <tbody>
  <tr>
    <td align="left" style="vertical-align:top;">
      <p>
        <b>Isn't she hot??</b>
      </p>
    </td>
    <td align="right">	
      <img width="150" height="150" src="http://pixel.nymag.com/imgs/daily/vulture/2015/11/25/25-jennifer-lawrence-directs.w529.h529.jpg" alt="" border="0"/>  
    </td>
  </tr>
  </tbody>
</table>

这是您可以在不使用表的情况下执行此操作的一种方法，此方法会使divs像表格单元格一样：

.container {
  width:500px;
  display:table;
}
  .container > div {
    width:50%;
    display:table-cell;
  }
    .container > div p {
      margin:0;
    }
    .container .left {
      vertical-align:top;
    }
    .container .right {
      text-align:right;
    }

<div class="container">
  <div class="left">
    <p>
      <b>Isn't she hot??</b>
    </p>
  </div>
  <div class="right">	
    <img width="150" height="150" src="http://pixel.nymag.com/imgs/daily/vulture/2015/11/25/25-jennifer-lawrence-directs.w529.h529.jpg" alt="" border="0"/>  
  </div>
</div>

使用图像在HTML表格中定位文本

1 个答案: