html - HTML - 表格/td 大小问题

Question

我在这里看到的问题：http: //jsfiddle.net/gcgz8/

<table>
  <tr>
    <td class="header">Header</td>
    <td class="line"><div></div></td>
  </tr>
  <tr>
    <td colspan="2">
      <img src="http://i.imgur.com/uO2gVbl.png" width="200px" />
    </td>
  </tr>
</table>

每当我将图像或视频添加到我的内容时，标题和行就会混乱

Answer 1

http://jsfiddle.net/gcgz8/3/

答案：不要使用表格？

<span class="left">Header</span><span class="right"></span>
<p>content content content content content content content content content content content content content content content content content </p>
<span class="left">Header</span><span class="right"></span>
<p><img src="http://i.imgur.com/uO2gVbl.png" width="200px"></p>

CSS

.left {
    display: inline-block;
    width: 12%;
    font-size: 30px;
}
.right {
    display: inline-block;
    width: 88%;
    background: black;
    margin: 25px 0 10px 0;
    height: 5px;
}

这不是我最好的作品，只是你“可以”做的一个例子。