并排对齐 2 个 div - 右侧随机宽度，左侧使用剩余宽度 [重复]

Question

可能重复：
Two divs, one fixed width, the other, the rest

我想要 2 个 divs 并排，其中右侧具有随机宽度（这包含另外 2 个 divs - 一个带有随机文本的标题和一个带有随机图像的正文，全部由 JS 生成）而左边应该使用剩余的宽度（这也包含另外 2 个divs - 一个标题和一个正文，都只包含静态文本）。

我目前有一个具有 3 个 tables 的解决方案，它非常简单，但是当我将所有没有严格表格内容的表格重新编码为 CSS 时（是的，我已经晚了几年) 如果可能的话，我也更愿意在 CSS 中使用它？找了好久的解决办法，好像不是……

值得注意的是，图像的高度始终是相同的，每个图像的宽度也是在 JS 中指定的。

我目前的解决方案（去除了 JS 和更多内容以尽可能简单明了，图像只是一个示例，宽度可能高达 250px）：My fiddle

HTML：

<table class="container" cellpadding="0">
 <tr>
  <td>
   <table class="left">
    <thead>
     <tr>
      <th>Text Header</th>
     </tr>
    </thead>
    <tbody>
     <tr>
      <td>This just contains text.
      </td>
     </tr>
    </tbody>
   </table>
  </td>
  <td>
   <table class="right">
        <thead><tr>
        <th>Image Header</th>
        </tr></thead>
        <tbody>
        <tr>
        <td>
         <img src="http://www.derdiz.com/wp-content/uploads/2011/06/vertigo.jpg" width="200" height="200" border="0" style="display:block;">
        </td>
        </tr>
        </tbody>
        </table>
  </td>
 </tr>
</table> 

CSS：

table {
border-collapse: collapse;
}
table.container {
width: 500px;
background-color: #DDD;
border: 1px solid #0F0;
}
.container td {
vertical-align: top;
}
table.left {
border: 0px;
}
table.right {
border-left: 1px solid #F00;
}
.left th, .left td, .right th, .right td {
padding: 3px;
}
.left thead th, .right thead th {
background-color: #00F;
color: #FFF;
font-weight: bold;
text-align: left;
}
.right tbody td {
background-color: #888;
}    

请告知您是否还想要 JS 和我未完成的纯 CSS 解决方案。

Answer 1

而不是js，如果你使用两个浮动div，一个包含文本和文本标题，一个包含图像和图像标题，我认为它应该做你想要的：

http://jsfiddle.net/PeyWR/10/

（我丢失了你的一些样式，但我认为这个想法就在那里）。