html - 用 div 标签替换 html 表格

Question

我的网站 (emma-moore.com) 上有一个 html 表格，用于布局而不是表格数据:

<table border="0" cellpadding="5px" width="100%" class="followFont">
  <tbody>
    <tr>
      <td align="left">Follow your heart</td>
    </tr>
    <tr>
      <td align="left" style="padding-bottom: 10px">and you'll always</td>
    </tr>
    <tr>
      <td align="left">
        <img border="0" src="balloonsAndLavenderFields.jpg" width="99px" height="150px" class="homePictureFrame" />
      </td>
    </tr>
    <tr>
      <td align="left" style="padding-top: 10px">end up where your</td>
    </tr>
    <tr>
      <td align="left">soul needs to be.</td>
    </tr>
  </tbody>
</table>

最佳做法是不要使用内联样式和表格进行布局，我想知道如何用 div block 替换表格并将文本和 jpg 放在 div block 中，这样文本和 jpg显示方式与使用表格时相同。我怎样才能最好地使用 css 和 div block 来做到这一点？

谢谢，

威廉

Answer 1

.followFont 
{
padding:5px;
border:0;
cellpadding:5px;
width:100%;
display:table; 
}

<div class="followFont">

<div style="display:table-row;">
    <div style="width:100%; display:table-cell; text-align:left;">Follow your heart</div>
</div>

<div style="display:table-row;">
    <div style="width:100%; display:table-cell; text-align:left; padding-bottom: 10px;">and you'll always</div>
</div>

<div style="display:table-row;">
    <div style="width:100%; display:table-cell; text-align:left;">
        <img border="0" src="balloonsAndLavenderFields.jpg" width="99px" height="150px" class="homePictureFrame" />
    </div>
</div>

<div style="display:table-row;">
    <div style="width:100%; display:table-cell; text-align:left; padding-top: 10px;">end up where your</div>
</div>

<div style="display:table-row;">
    <div style="width:100%; display:table-cell; text-align:left;">
      soul needs to be.
    </div>
</div>

</div>